Cross Browser Image Rollovers

Having an image change when your visitor moves their mouse over it is one of the most basic javascripts that people use on their pages and there are lots of places on the web where you can download javascripts that do this for you. So why am I adding another page on this topic when so many have already covered it? Well there are some differences in the way that the different browsers handle (or don't handle) image rollovers depending on how you code them so I am going to cover cross platform compatibility and the effect of coding the rollover in different ways depending on what you want to achieve.

First, the following is the javascript code that I have placed in the head section of this page to handle the two image rollovers that you will find lower down on this page:

 if (document.images) {
  image1 = new Image;
  image2 = new Image;
  image1.src = 'img\/server1.gif';
  image2.src = 'img\/server2.gif';
} else {
  image1 = '';
  image2 = '';
  document.rollimg = '';
  document.rollimg2 = '';

This solves the first problem with image rollovers by providing code for browser versions that support javascripts but don't allow image replacement at all. These browsers will process the else clause of this code which results in the page displaying without the rollover effect (which the browser doesn't support) and without creating any javascript errors either.

The next problem with regard to image rollovers is that versions of Netscape prior to version 6 do not recognise javascript mouse methods except when they are associated with an <a> tag. This means that Netscape 4.7 (and earlier) only allow a rollover to be attached to a link. This is not a problem if you actually want to use the rollover with a link but what can you do if you don't want the image to be a link?

Well there are two choices here depending on whether you want to support Netscape 4.7 or not. If not supporting earlier versions of Netscape doesn't worry you then you can attach the rollover methods to a <span> tag surrounding the image. The image on the left below illustrates this method. Alternatively if you want the image rollover to work with Netscape 4.7 as well as the other browsers then you need to attach the rollover methods to an anchor tag and supply additional code to disable the link from actually linking anywhere. The image on the right below illustrates this method. Note that the fact that this is actually defined as a link that doesn't go anywhere is more obvious on my site because I have links set to use a yellow background when the mouse goes over it, normally this would not be so obvious and the two effects would appear the same on all browsers (other than Netscape 4.7) except for the difference in the appearance of the mouse cursor.

So here we have the two examples of the image rollover using an image of a computer where the screen changes from white to blue when the mouse pointer rolls over it.

example image example image

The code to produce the image rollover effect in the first example is the same as you probably expect except for the fact that it uses span as the tag to control the effect instead of a and doesn't have any reference to a page to link to because it isn't a link.

 <span onmouseover="document.rollimg.src=image2.src;" onmouseout="document.rollimg.src=image1.src;"><img src="img/server1.gif" width="80" height="83" border="0" alt="example image" name="rollimg" /></span> 

The second version (the one that also works with Netscape 4.7) is slightly more complicated. We don't really want it to link to anywhere but a link tag has to link to somewhere so we include href="#" which will link to the top of the current page. The link will actually do that only if the browser has javascript turned off because we also include onclick="return false;" which disables the link. The complete code for this image rollover follows:

 <a href="#" onmouseover="document.rollimg2.src=image2.src;" onmouseout="document.rollimg2.src=image1.src;"
onclick="return false;"><img src="img/server1.gif" width="80" height="83" border="0" alt="example image" name="rollimg2" /></a>

So there you are, two different ways to provide image rollovers that are not links. Of course the second example can easily be turned into a link by changing the # into the link address and removing the onclick="return false;".


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow