Ryan's District Boards

Computer, programming, and webmaster help , support , tips and tricks => Internet webmaster computer programming technology tips and tricks => Topic started by: vinod on July 21, 2006, 12:05:50 AM

Title: Highlight an Image on Mouseover
Post by: vinod on July 21, 2006, 12:05:50 AM
Highlight an Image on Mouseover
You can use JavaScript to highlight an image when you place your mouse over it.



Place the following code between your HEAD tags:

<SCRIPT language="JavaScript1.2">
<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
// -->
</SCRIPT>

Place the following code within all of the image tags you'd like the affect to be applied:


style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"

Here's how your image tag might look:


<img src="yourimage.gif" width="96" height="134" style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">