Displaying Hover-Sensitive Images

How to use JavaScript to make page elements (such as images) respond when a user hovers over them.

About this technique	Details
Category	HTML Client Techniques> JavaScript
Description	You'll learn about: Writing hover code in line Writing hover code in a function
	You can run this technique code from: File: HoverImages.html
Related reading	See the chapter on advanced page topics in the Programmer's Guide

Writing hover code in line   

Certain page elements support onMouseOver and onMouseOut events in JavaScript. This enables you to write event-handler code that performs some action when a user hovers the mouse over that element.

The quick way to write such code is to place it in line, embedded in HTML tags. Here's an example in which the image file displayed by an image element is switched when the hover occurs.

  <a href="javascript:void(0)" 
  onMouseOver="document.images[0].src='programming2.jpg'" 
  onMouseOut="document.images[0].src='programming1.gif'"> 
  <img src="programming1.gif" border=0 name="demo"> 
  </a> 

Using the images array

Even though the image tag has a name attribute defined, in SilverStream you refer to page elements via their JavaScript arrays. For images, that's the images[] array. The first image on a page is document.images[0]. The second is document.images[1], and so on.

Writing hover code in a function   

If you plan to provide a lot of hover-sensitive images on your pages, you can write a generalized JavaScript function to handle them. The following example shows one way to do this (which relies on having image file names that contain sequential numbers):

  <script> 
  <!-- 
      
     // Standard Browser Check 
      
     browserCheck = ((navigator.appName == "Microsoft Internet Explorer")  
                   || (navigator.appName == "Netscape")) &&  
                   (parseInt(navigator.appVersion) >= 4) 
   
     // The hoverFunction takes one parameter, a reference 
     // to the actual image object that you want to work 
     // with. 
   
  function hoverFunction(whichImg) { 
   
     // If they don't have a compatible browser, do not 
     // try to do a hover. 
   
     if (!browserCheck) 
        return; 
   
     // Set the image's source to a variable in the function 
     // so you can deal with it separately. 
   
     imgSrc = whichImg.src; 
   
     // Since you are naming images in the format: 
     //    image1.gif 
     //    image2.gif 
     // all you need to do is find out if the current image 
     // is a 1 or a 2 and switch it accordingly. 
   
     // Note: Your naming convention does not have to 
     // use the same 1 or 2 scheme or GIF-type images. 
   
     // So here, you check to see if there is a '1' in 
     // the image source. 
   
     if (imgSrc.indexOf("1.gif") == -1) { 
   
        // There is no '1' so replace the '2' in  
        // the source with a '1' 
   
        imgSrc = imgSrc.replace(2 + ".gif",1 + ".gif"); 
     } 
     else { 
     
        // There is a '1' in the source so replace 
        // it with a '2' 
   
        imgSrc = imgSrc.replace(1 + ".gif",2 + ".gif"); 
     } 
   
     // Set the source of the image to the new source 
   
     whichImg.src = imgSrc; 
  } 
   
  //--> 
  </script> 

Here's an example of some HTML that calls this function:

  <table border=0 bgcolor="#C8D7DE"><tr> 
   
  <td width=50> 
  <a href="javascript:void(0)" 
  onMouseOver="hoverFunction(document.images[1])" 
  onMouseOut="hoverFunction(document.images[1])"> 
  <img name="silverstream" src="SilverStream1.gif" border=0> 
  </a> 
  </td> 
   
  <td> 
  <a href="javascript:void(0)" 
  onMouseOver="hoverFunction(document.images[2])" 
  onMouseOut="hoverFunction(document.images[2])"> 
  <img name="tools" src="tools1.gif" border=0> 
  </a> 
  </td> 
   
  </tr></table> 

Notice that in the onMouseOver and onMouseOut events, the hoverFunction() call has one parameter, and this is not the source of the image but a reference to the actual image object.