All About Coding - Programming and Software Tutorials

JavaScript Image Rollover Tutorial

Introduction:

In this simple tutorial you will learn how to use JavaScript to make your web pages have rollover images. This is especially good effect for menus.

Let's Get Started:

1. We're going to start with a simple web page. We will have a single image on this page and will be haveing the roll over effect applied to it. You can copy and past the HTML code below into you editor. You can also save the two images used with these links. Image1 Image2

<html>

<head>
<title>Sample Web Page</title>
</head>

<body>
<img src="image_roll_over_1.jpg" width="100" height="100">
</body>

</html>

2. Ok so first we need to add the script that does all the dirty work. I must also tell you that this is not my personal code. This is a well known piece of code that is what is auto-genereated by the wizard in Dreamweaver. No point in rewriting already perfect code! Now this code is very difficult to read, especially if you are not a programmer. This code has been trimmed down to its most basic parts. Dont worry if you cant read it, you wont need to make any changes to it.

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>

3. Ok now that the hard stuff is done there are two more things we have to do. The first is add a call to the preload function to load all of our secondary images. The advantage of this is that when they hover over you image the picture will have already been loaded and they wont see the flicker as the image gets downloaded. Just update your body tag to look like this. You will list multiple image names in this seperated by commas if you have more than one image to preload.

4. The Last thing you need to do is place function call to swap the image on the mouse over and mouse out events. To do this you must have you image inside and anchor tag. You can have it with or without a hyperlink, but since this is mainly used for buttons I went ahead and added a hyperlink for you. You need to look out for a couple of things here. First is you image must have a name tag in it. In the sample I used the name TestImage, and yes it is case sensitive. Second you will see that for the onMouseOver event in the function call the first value will be the name for your image, again you will see TestImage. The last thing you need to do is have the file name for the roll over image as the second value for that function call.

5. Full Code

<html>
<head>
<title>Sample Web Page</title>
<script 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_preloadImages() { //v3.0
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];}}
}

</html>

Conclusion:

Congratulations your done. That was a simple tutorial. This simple technique is great for doing menus but can be used for several other things. I thought you might also like to see this page in action so here it is, enjoy.