How to use JavaScript to make page elements (such as images) respond when a user hovers over them.
You can run this technique code from:
| |
See the chapter on advanced page topics in the Programmer's Guide |
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.
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.