Image Links 1

See also Multi Image Links 1

The image is changed on mouseover, mouseout, and onclick, the onclick image remains until another link is clicked

This example uses three images for all the links, one for each event.

Default & Onmouseout image Onmouseover image Onclick image

Mouse over, out and click the following examples

To create your image link the img tag is nested within a link

<a href="page.htm">
<img src="off.gif" name="img1" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mActive(this)">
</a>

If you are using the same image for the links onmouseover and onclick state enter the two images in the array index in the order

var images = new Array("off.gif","on.gif")

If you are using a different image for the links onmouseover state enter the three images in the array index in the order

var images = new Array("off.gif","on.gif","over.gif")

To show a particular links onclick image when the page initially loads add onload="mActive('name')" to the opening body tag, where name is the name of the image tag.

A corresponding pages link can also be highlighted in frames by simply calling parent.framename.mActive('name') for a frameset or parent.mActive('name') for an iframe from the page in the frame

<script type="text/javascript">
<!--

/*
In the array
("off.gif","on.gif") = 2 image state
("off.gif","on.gif","over.gif") = 3 image state
/*

var images = new Array("off.gif","on.gif","over.gif")

var preloadImages=new Array() // preloads images
for (i=0;i<images.length;i++) {
preloadImages[i]=new Image()
preloadImages[i].src=images[i]
}

lastN = ""

function mOver(obj){
if(lastN != obj.name){
document.images[obj.name].src = (images.length==3?images[2]:images[1])
}
}

function mOut(obj){
if(lastN != obj.name){
document.images[obj.name].src = images[0]
}
}

function mActive(obj){
if(typeof obj!="string"){obj=obj.name}

document.images[obj].src = images[1]
if (lastN != "" && lastN != obj){
document.images[lastN].src = images[0]
}
lastN = obj
}

// -->
</script>