MouseOvers using JavaScript

**IH-James** · 03-09-2004, 09:32 AM

Have you ever visited a web site where an image changed when you pointed your mouse over it?

Chances are, you probably have, but if not, I've created an example here. The scource code for this example is attached to this tutorial (below).

This tutorial will show you how to achieve the effect seen in the example above.

Step 1
First of all, create your image that you wish to display when the page loads. Secondly, create the image that has the efffect(s) you wish to show when a visitor mouses over your initial image.

In the example above, I've called the first image home.gif, and the mouseover image home_over.gif. I suggest that you follow a similar naming convention.

Step 2
Add the following block of code to your existing web page somewhere between your opening head tag (<head>) and your closing head tag (</head>):

HTML Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.p) d.p=new Array();
    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}

function swapImgRestore() { //v3.0
  var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function 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=findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function swapImage() { //v3.0
  var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Step 3
Your existing image code should look something simlar to this:

HTML Code:

<img src="images/home.gif" alt="Our Home Page" name="home" width="50" height="20" border="0" id="home">

Note that the name & id attributes are set. You must set these to something that no other image on the page will have.

Add the following code to the left of the image code above:

HTML Code:

<a href="homepage.html" onMouseOver="swapImage('home','','images/home_over.gif',1)" onMouseOut="swapImgRestore()">

You can change the href="" part to point to any page you wish, for example:

HTML Code:

href="http://www.mydomain.com/homepage.html"

Now add the closing link code (below) to the right hand side of the image code above:

HTML Code:

</a>

Step 4
At this stage the code would do what we require it to do, however it is better practice to preload the _over images when the page loads. This reduces the time delay between the visitor pointing the mouse over the image, and the _over image loading.

To do this, add this code to your <body> tag:

HTML Code:

 onLoad="preloadImages('images/home_over.gif')">

For example, if your body tag was <body>, it would now be:

HTML Code:

<body onLoad="preloadImages('images/home_over.gif')">

Step 5
That's it!
Save your html file and view it in a web browser to see the results.

The complete source code is attached below:

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode