Image Rollovers

This topic is so done you could stick a fork in it, but I thought I’d contribute my personal take on this typical operation.

Here’s the rollover:

Here’s the code:

   <script language="javascript" type="text/javascript">
   <!--

   d = document;  // putting document in a variable speeds processing
   p = "images/"; // base path to image files, relative to this page

   function swap(imgName,imgSrc) {
      d.images[imgName].src = p + imgSrc;
   }

   //-->
   </script>

   <a href="index.html"
      onmouseover="swap('keri','keri_hi.gif')"
      onmouseout="swap('keri','keri.gif')">
   <img name="keri" src="images/keri.gif" alt="Keri"
        width="93" height="96" hspace="4" vspace="4"
        border="0">
   </a>

This method has the advantage of being really simple. What it doesn’t do is preload the images. If your images are small, this shouldn’t be much of an issue. For a more sophisticated script that does preload images, see the following (only runs in "modern" browsers … that is, not Netscape 4!):

http://efficacy.net/india/wedding_1_0.html - a page of photos where the thumbnails rollover
http://efficacy.net/india/photo_rollovers.js - the script referenced in the above page (if you use it, please give me credit!)