Highlight an Image on Mouseover

Submitted by:Andery Smith

Date added:13 August, 2011


If you're looking for a way to spice up your web site, this JavaScript tip may be just what you're looking for. You can use JavaScript to highlight an image when you place your mouse over it.

This JavaScript tip provides a great way to highlight your navigational buttons or whatever you'd like.

Tags: highlight image

Code Snippet:

Place the following JavaScript code between your HEAD tags:
<SCRIPT language="JavaScript1.2">
<!--Your Guide to Professional Web Site Design and Development
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
else if (cur.filters)
// -->

Next, 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)">