This effect that here is used to change two images when the mouse passes over and when leaves off, can be used for image buttons. The script linked to this page that we name swapim.js s is made with 4 functions, and is linked to the page with the following instruction .
<script type="text/javascript" src="swapim.js"></script>
which is set just before the TAG </head>.
To operate the images exchanges simply write after the body tag the address of the first image
<body onLoad="MM_preloadImages('../imgs/img6.jpg')">
HOW DOES IT WORKS
This first function uses the variable d = document, then IF the variable d.document is an image and the array ot 2 images named d.MM_p is empty, it preload images into the array itself.
function MM_preloadImages() {
var d=document;
if(d.images)
{ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
This function uses the variables ,i , x, a to restore after swapping images
function MM_swapImgRestore() {
var i,x,a=document.MM_sr; //it defines the vaiables 1, x, a - MM_sr is the new array
for(i=0;
a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
This function uses the variable p.i.x to find AND GET the object IMAGE
function MM_findObj(n, d) {
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length
;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
This function uses the variable i, j ,.x, a to swap the object
function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}