The Classic Rollover !

The term 'rollover' is used to describe a picture that changes its appearance when a user places their mouse pointer over it. In their simplest form they consist an image surrounded by a link tag. Some rollovers can suffer from problems caused by the delay incurred when downloading an image for the first time. However the solution provided below eliminates this problem by loading the images in the head section before the document is displayed.

Example Code

Code placed in the head section of your html file !!!
<script type="text/javascript" language=javascript>
<!--
  //if images are supported then download them now !!!
  if (document.images) {
    //The 4 lines below preload 2 images for a single rollover
    r1out = new Image();
    r1over = new Image();
    r1out.src = 'outi.gif';
    r1over.src = 'overi.gif';
  }

  function saferoll(itagName, imgFile) {
    if (document.images) {
      document.images[itagName].src = imgFile;
    }
  }
// -->
</script>

Code for a rollover link placed in your html file !!!
 <a href="link-to.html"
   onmouseout="saferoll('imgTagName', 'outi.gif')"
   onmouseover="saferoll('imgTagName', 'overi.gif')"
 ><img name="imgTagName" src="outi.gif" border=0></a>

Note: 'imgTagName' must be a unique name for each rollover.