The image is changed on mouseover, mouseout, and onclick
When the link is clicked the onclick image remains and the mouseover and mouseout images are cancelled until the link is clicked again
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
["off.gif","on.gif"]
If you are using a different image for the links onmouseover state enter the three images in the array in the order
["off.gif","on.gif","over.gif"]
To create your image link the img tag is nested within a link, the img tag contains an ID and the mouse events.
<a href="page.htm">
<img src="pic1_off.gif " id="img0" onmouseover="mOver(this)" onmouseout="obj0.mOut(this)" onclick="obj0.mActive(this)">
</a>
Each additional image links ID must have an ordinal number
<a href="page.htm">
<img src="pic2_off.gif " id="img1" onmouseover="mOver(this)" onmouseout="obj1.mOut(this)" onclick="obj1.mActive(this)">
</a>
When a link is clicked the script needs to know if this is the first or second click for that link.
This script creates new instance of the function doEvents() for each link and its mouse events, using the object constuctor, where the mouse event status is stated.
For this reason you will notice that the onmouseout and onclick function calls are preceded by objn, where n is the same number as in the image ID.
<script type="text/javascript">
<!--
var images = [ // list images to preload
["fred_off.gif","fred_on.gif","fred_over.gif"],
["wilma_off.gif","wilma_on.gif","wilma_over.gif"],
["barney_off.gif","barney_on.gif","barney_over.gif"],
["betty_off.gif","betty_on.gif","betty_over.gif"],
["pebbles_off.gif","pebbles_on.gif","pebbles_over.gif"]
]
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]
}
}
function mOver(obj){
num=obj.id.replace(/[^0-9]/g,"")
if(!window["obj"+num]){
window["obj"+num]=new doEvents()
}
window["obj"+num].over(obj,num)
//document.getElementById(obj.id).style.width="50px"
//document.getElementById(obj.id).style.height="50px"
}
function doEvents(){
this.status="out"
this.over=function(obj,num){
if(this.status!="clicked"){
document.getElementById(obj.id).src=(images[num].length==3?images[num][2]:images[num][1])
this.status="over"
}
}
this.mOut=function(obj){
num=obj.id.replace(/[^0-9]/g,"")
if(this.status!="clicked"){
document.getElementById(obj.id).src=images[num][0]
this.status="out"
}
}
this.mActive=function(obj){
num=obj.id.replace(/[^0-9]/g,"")
if(this.status=="clicked"){
document.getElementById(obj.id).src=images[num][0]
this.status="out"
}
else{
document.getElementById(obj.id).src=images[num][1]
this.status="clicked"
}
}
}
function defaultLink(obj){
num=obj.replace(/[^0-9]/g,"")
if(!window["obj"+num]){
window["obj"+num]=new doEvents()
}
window["obj"+num].mActive(document.getElementById(obj),num)
}
// add onload="defaultLink('img1')" to the opening body for default on link
// -->
</script>
<style type="text/css">
div a{
border:0
}
div a:hover{
border:0
}
div img{
width:30px;
height:30px;
border:0
}
</style>
<h1><span>Multiple Image Links 1c</span></h1>
The image is changed on mouseover, mouseout, and onclick<br>
Once clicked the mouseover and mouseout events for that image are cancelled until the image is clicked again<br>
Each link uses a seperate image for each mouse event
<P>
<div style="text-align:center">
<a href="#null"><img src="fred_off.gif" id="img0" class="imgs" onmouseover="mOver(this)" onmouseout="obj0.mOut(this)" onclick="obj0.mActive(this)"></a>The image is changed on mouseover, mouseout, and onclick
Once clicked the mouseover and mouseout events for that image are cancelled until the page is refreshed.
<script type="text/javascript">
<!--
var images = [ // list images to preload
["fred_off.gif","fred_on.gif","fred_over.gif"],
["wilma_off.gif","wilma_on.gif","wilma_over.gif"],
["barney_off.gif","barney_on.gif","barney_over.gif"]
]
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]
}
}
function mOver(obj){
num=obj.id.replace(/[^0-9]/g,"")
if(!window["obj"+num]){
window["obj"+num]=new doEvents()
}
window["obj"+num].over(obj,num)
}
function doEvents(){
this.status="out"
this.over=function(obj){
num=obj.id.replace(/[^0-9]/g,"")
if(this.status!="clicked"){
document.getElementById(obj.id).src=(images[num].length==3?images[num][2]:images[num][1])
this.status="over"
}
}
this.mOut=function(obj){
num=obj.id.replace(/[^0-9]/g,"")
if(this.status!="clicked"){
document.getElementById(obj.id).src=images[num][0]
this.status="out"
}
}
this.mActive=function(obj){
num=obj.id.replace(/[^0-9]/g,"")
document.getElementById(obj.id).src=images[num][1]
this.status="clicked"
}
}
function defaultLink(obj){
num=obj.replace(/[^0-9]/g,"")
if(!window["obj"+num]){
window["obj"+num]=new doEvents()
}
window["obj"+num].mActive(document.getElementById(obj),num)
//window["obj"+num].status="clicked"
}
// add onload="defaultLink2('img1')" to the opening body for default on link
// -->
</script>
<h1>Multiple Image Links 1d</h1>
The image is changed on mouseover, mouseout, and onclick<br>
Once clicked the mouseover and mouseout events for that image are cancelled until the page is refreshed.<br>
Each link uses a seperate image for each mouse event
<img src="fred_off.gif" id="img0" class="imgs" onmouseover="mOver(this)" onmouseout="obj0.mOut(this)" onclick="obj0.mActive(this)">