Hot Spot Image Rollovers

Believe it or not there are actually two photos lower down on this page. You can't see them just by scrolling down the page because they both occupy the blank spot directly below this paragraph. That's right the two photos that you can't see at the moment occupy the same spot on the page. To get the photos to appear you need to place the mouse over the appropriate caption below the photo (they are links that I have set to display in grey since they don't actually link anywhere - they just display the appropriate photo). Depending on which caption you place the mouse cursor over the corresponding photo will appear to match the description. Because this requires you to position the mouse over one of several different "hot spots" I am calling this a hot spot rollover effect. Go ahead and try the effect now.

The appropriate photo will display here to match the caption below

Daniel walking along the railway track
Stephen with Daniel and a friend

See how conveniently the above technique saves you a lot of space on your page by fitting multiple images into the same space. This can be expanded to include as many images as you like all in the same spot but I suggest you keep the number low or your total page size will make the page extremely slow to load.

We are actually using an image rollover similar to the Cross Browser Image Rollover described on the previous page. The version that we are using here is the one that uses anchor tags so that it will work with Netscape 4 but if you don't need to support that browser you can substitute the version that uses span tags instead. The difference from the code provided there is that we have moved the image containing the name= that the rollover references outside of the rollover and placed it elsewhere on the page. In its place we have put the caption text. The rollover code is repeated for each caption and places a single pixel transparent image resized to fill the same space into the photo space when you roll off of the hot spot.

Okay so on to the specifics of how the code looks. As you can see it is standard image rollover code except for the position of the name= parameter which stays with the image. Here is the javascript that I put in the head section of this page to preload the images:

 if (document.images) {
  image0 = new Image;
  image1 = new Image;
  image2 = new Image;
  image0.src = 'img\/1x1shim.gif';
  image1.src = 'img\/eln02.jpg';
  image2.src = 'img\/eln04.jpg';
} else {
  image0 = '';
  image1 = '';
  image2 = '';
  document.rollimg = '';

and here is the code within the page that initially places the transparent image in the page as a placeholder and puts the hotspots under it that will substitute the appropriate images:

 <p class="centre"><img src="img/1x1shim.gif" width="380" height="284" border="0" alt="The appropriate photo will display here to match the caption below" name="rollimg" /></p>
<p class="centre"><a href="#" onmouseover="document.rollimg.src=image1.src;" onmouseout="document.rollimg.src=image0.src;"
onclick="return false;">Daniel walking along the railway track</a><br />
<a href="#" onmouseover="document.rollimg.src=image2.src;" onmouseout="document.rollimg.src=image0.src;"
onclick="return false;">Stephen with Daniel and a friend</a></p>


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow