Inside Technique : Back to Basics with Images : Building Rollover Effects

We now combine all the concepts presented in this article to create a cross-browser rollover effect. Rollover effects are possible in Internet Explorer 4.0 or later and Netscape Navigator 3.0 or later. The first step to a cross-browser rollover effect is to track when the mouse enters and leaves the image. Netscape Navigator only exposes the over and out events on links (<A HREF="...">), while Internet Explorer supports the events on the link and directly on the image. Since we want to create a rollover effect that runs in both browsers, we must limit ourselves to Netscape's model.

Below we show you the simplest and quickest way to add a rollover effect to an image:

<SCRIPT>
function swapImage(sName,sImage) {
  document.images[sName].src = sImage
}
</SCRIPT>
<A HREF="#" 
    ONCLICK="return false"
    ONMOUSEOVER="swapImage('myImage','/gifs/red.gif')"
    ONMOUSEOUT="swapImage('myImage','gifs/blue.gif')"
>
  <IMG SRC='/gifs/blue.gif' NAME='myImage'>
</A>

While this creates a rollover effect, it has the disadvantage of causing a pause while the image is being downloaded. By combining the rollover effect with the preloader, you can improve the chances that the image will be downloaded or at least be in the process of being downloaded before the user moves over the element. Once the image is downloaded, the rollover effects occur instantaneously:

<SCRIPT>
var imgArray = new Array("/gifs/red.gif")
var iCnt = 0

function DoLoad() {
  if (iCnt < imgArray.length) {
    var loadImage = new Image
    iCnt++  
    loadImage.onerror = loadImage.onload = DoLoad
    loadImage.src = imgArray[iCnt-1]
  } else
    window.location.replace("NextPage.htm")
}

window.onload = DoLoad

function swapImage(sName,sImage) {
  document.images[sName].src = sImage
}
</SCRIPT>
<A HREF="#" 
    ONCLICK="return false"
    ONMOUSEOVER="swapImage('myImage','/gifs/red.gif')"
    ONMOUSEOUT="swapImage('myImage','gifs/blue.gif')"
>
  <IMG SRC='/gifs/blue.gif' NAME='myImage'>
</A>

It is very easy to extend this sample to be more powerful and to better integrate the image preloader with different rollover effects on your page. The same onerror and onload events are also available directly on the IMG elements in your page. For example, you can create a simple image rotator directly on the IMG tag:

<SCRIPT>
var bWhich = true
function ImageSwap() {
	if (bWhich)
		document.images.imgColor.src = "blue.gif"
	else 
		document.images.imgColor.src = "red.gif"
	bWhich = !bWhich 
}
</SCRIPT>

<IMG SRC="red.gif" 
     NAME="imgColor"
     ONLOAD="setTimeout('ImageSwap()',2000)"
     WIDTH=100 HEIGHT=100
     ALT= "Rotating colors"
>

We hope you enjoyed our introduction to using and scripting images. We have started the Back to Basics series in response to your requests for more introductory articles. We are interested in your feedback for helping us determine the appropriate level for future articles in this series.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.