Home / code

RollOver image

Writer: Christophe Wolfs
Published: 27 March 2008

If you want that a picture is replaced when you move your mouse over it, then you need this script.
Especially good for buttons.

<script language="JavaScript">
<!--
function newImage(arg)
{
  if(document.images)
  {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
  }
}

function changeImages()
{
  if(document.images && (preloadFlag == true))
  {
        for(var i=0; i<changeImages.arguments.length; i+=2)
        {
          document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
  }
}

var preloadFlag = false;
function preloadImages()
{
  if(document.images)
  {
        pic1_over = newImage("pic1_over.gif");
        pic2_over = newImage("pic2_over.gif");
        preloadFlag = true;
  }
}
// -->
</script>


The next few lines you place in the body: 
<a href="page.html" 
onmouseover="changeimages('pic1_over', 'pic1_over.gif'); return true;"
onmouseout="changeimages('pic1', 'pic1.gif'); return true;">
<img name="pic1" src="1.gif" width=159 height=18 border=0></a>

Dont forget the load the preloadscript on loading: 
<body onload="preloadImages();">

 

TOP