cee oh em gee tee - "commgitt"


Client-side web browser scripting language.

JavaScript Mouse-Overs

If you've ever visited a Web page where moving the mouse pointer over a button changes the appearance of that button, you've probably encountered a JavaScript mouse-over. Also called a rollover or hover button, a JavaScript mouse-over has a simple principle: The browser loads an initial image, then replaces that one with a second image when it detects the pointer at a specific position.

To create a basic mouse-over button, you need to create two separate images, which we'll call imageOFF and imageON. ImageOFF appears when the browser loads the page, imageON when the visitor moves the pointer onto imageOFF. When the pointer moves away from the button, imageOFF reappears.

To create the elegant effect of a subtle change to the button, create two images that are identical in size and shape and that differ only in the specific characteristics you want to display. These characteristics could include background color, text font, the filling in of a radio button, or anything else that will give the user the visual feedback you desire.

With the two images created and saved (here, imageOFF.gif and imageON.gif), you can develop the script. First, place a <SCRIPT> container between the <HEAD> tags of your HTML page:

< SCRIPT language="JavaScript"> if (document.images) { buttonoff = new Image() ; buttonoff.src = "imageOFF.gif";
buttonon = new Image() ; buttonon.src ="imageON.gif"; } </SCRIPT>

The reason to place this code in the <HEAD> container is to force the browser to preload both images. This way, imageON.gif is available instantly when the visitor points to the button. Otherwise, the second image would have to load separately, resulting in a delay.

Next, place HTML code into the <BODY> container of the page to tell the browser what to do with the images:

< A HREF = "index.htm"
onmouseover="document.img1.src = buttonon.src;")
onmouseout="document.img1.src = buttonoff.src;">
< IMG NAME = "img1" SRC = "imageOFF.gif">

The key items in the code are onmouseover and onmouseout. Here they point, respectively, to the buttonon.src and buttonoff.src variables, which we defined in the <SCRIPT> container.

The <IMG> tag tells the browser which of the two button graphics to load first. The JavaScript magic happens when the onmouseover command replaces the SRC for img1 with the imageON.gif file, thus swapping the graphic that appears in the browser. The URL in the first line tells the browser what to do if the user clicks on the image instead of just hovering over it.

You can set up multiple mouseovers by listing all the "off" and "on" graphic files in the <SCRIPT> container, then specifying in the HTML document where you want each graphic to appear. In fact, you can create an entire mouse-over menu for your site by setting up a table and placing each of the mouse-over buttons in its own cell, then assigning each graphic a destination URL that will take your visitors to the appropriate internal page.