Multiple Image Links 1

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

The following script allows a different image set to be used for individual links.
Each link can have its own default/onmouseout image

, onmouseover image

, and active image

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

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

To create your image link the img tag is nested within a link, the img tag contains a name and the mouse events.

To have a link highlighted when the page loads add onload="mActive('img0')" to the opening body tag where img0 is the name of the link

<script type="text/javascript">

<!--
var images = [ // list images
["pic1_off.gif","pic1_on.gif","pic1_over.gif"], // link 1
["pic2_off.gif","pic2_on.gif","pic2_over.gif"], // link 2
["pic3_off.gif","pic3_on.gif","pic3_over.gif"], // link 3
["pic4_off.gif","pic4_on.gif","pic4_over.gif"] // no comma at the end of the last index // link 4
]

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

lastN = ""
lastPic=""

function mOver(obj){
num=obj.name.replace(/[^0-9]/g,"")
if(lastN != obj.name){
document.images[obj.name].src = (images[num].length==3?images[num][2]:images[num][1])
}
}

function mOut(obj){
num=obj.name.replace(/[^0-9]/g,"")
if(lastN != obj.name){
document.images[obj.name].src = images[num][0]
}
}

function mActive(obj){
if(typeof obj!="string"){obj=obj.name}
num=obj.replace(/[^0-9]/g,"")

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

// add  onload="mActive('img0')" to the opening body tag to highlight starting link, if required

// -->
</script>