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.