Move your mouse over the picture above.
You should see the picture change. This is called a rollover image or an image
swap.
There are several steps to achieve this effect.
1. Find your two images. Mine are called 'horse.jpg' and 'dog.gif'
2. Edit your two images so that they are approximately the same size and save them in the same folder as the web page.
3. Copy the JavaScript header html code shown below, and past it in the HEADer section of your HTML code.
4. Copy the Image rollover html code shown below, and past it in the BODY section of your HTML code where you wish the image to appear.
5. Edit the Image roll over html code to show YOUR image file names. Note mine are called horse.jpg and dog.gif
JavaScript header HTML code
<!--Begin copying JavaScript header here-->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
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;
}
function MM_swapImage() { //v3.0
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];}
}
//-->
</script>
<!--end copying JavaScript header - paste in the HEAD section-->
Image Rollover HTML code
<!--begin coping image rollover here-->
<a href="javascript:;" onMouseOver="MM_swapImage('horse','','dog.gif',0)"
onMouseOut="MM_swapImgRestore()">
<img src="horse.jpeg" name="horse" width="120"
height="105" border="0" id="horse"></a>
<!--end copying image rollover here - paste in the body where you wish the image-->