. JavaScript . JavaScript Image Rollovers
JavaScript Image Rollovers

Rollover Image Swapping Example

Here's The JavaScript

<script language="JavaScript1.1">
<!--
percyon        = new Image(184,125);
percyon.src    = "http://www.fluffycat.com/javascript/percy-on.jpg";
percyoff       = new Image(184,125);
percyoff.src   = "http://www.fluffycat.com/javascript/percy-off.jpg";
puffinon       = new Image(100,136);
puffinon.src   = "http://www.fluffycat.com/javascript/puffin-on.jpg";
puffinoff      = new Image(100,136);
puffinoff.src  = "http://www.fluffycat.com/javascript/puffin-off.jpg";
woosteron      = new Image(159,100);
woosteron.src  = "http://www.fluffycat.com/javascript/wooster-on.jpg";
woosteroff     = new Image(159,100);
woosteroff.src = "http://www.fluffycat.com/javascript/wooster-off.jpg"; 

//the percy function brings you to Percy's page, 
//the puffin and wooster functions are dummy functions, 
//  which do nothing when the cat is clicked

function percy() { 
  window.location.href =
    "http://www.truecats.com/truecats/percy.html"; }
function puffin() {}
function wooster() {}
// -->
</script>
<a href="javascript:percy()"   
  onMouseOver="document.percy.src = percyon.src"
  onMouseOut="document.percy.src = percyoff.src">
  <IMG NAME=percy 
       src="http://www.fluffycat.com/javascript/percy-off.jpg"
       height=125 width=184 ></a>
                             
<a href="javascript:puffin()"  
  onMouseOver="document.puffin.src = puffinon.src"
  onMouseOut="document.puffin.src = puffinoff.src">
  <IMG NAME=puffin 
       src="http://www.fluffycat.com/javascript/puffin-off.jpg"
       height=136 width=100 ></a>
                             
<a href="javascript:wooster()" 
  onMouseOver="document.wooster.src = woosteron.src"
  onMouseOut="document.wooster.src = woosteroff.src">
  <IMG NAME=wooster 
       src="http://www.fluffycat.com/javascript/wooster-off.jpg"
       height=100 width=159 ></a>
to add the first comment for JavaScript Image Rollovers.