JavaScript: Mouse Over Events

Mouse over events seem to be popular of late. You can see them at places like ProjectCool and this year's MOSIS web site. The idea is fairly simple: whenever your mouse passes over certain links on a page, something changes, reinforcing for the visitor the "clickability" of the link.

There are two types of mouse over events I know of: the first type is more common because it seems to be so effective in animating a web page. This is where the event actually swaps one image for another for the time that the mouse is over the link. This site's home page uses this type of mouse over event. One image has been matched as closely as possible to the background color. The other image has the arrow that appears next to whichever link you're over. The third part of the event occurs when you move your mouse away from a link and the original image returns.

For this exercise, we'll work with the HTML code of this page. If you've seen the arrows at the bottom of most pages in this site, you may have noticed that the arrows become brighter when your mouse passes over. Not on this page, at least not yet. First, open up this page in Notepad and find the HTML text for the two images at the bottom of the page.

Next, examine the file imageswap.txt, which has the complete code for one of the two images we're going to modify. This is the code I've used for swapping images for the home page. What's different between the JavaScript link and the "normal" link that's currently on this page is a) two lines of JavaScript have been added to the link tag and b) the image tag now has a name. The two lines of JavaScript tell your browser what to do when the mouse passes over the link (load the image homeon.gif) and what to do when the mouse moves away from that link (load the image home.gif). The name that's associated with the image is referenced in the two lines of JavaScript. The idea behind giving the image a name is that you could control one image from several different links if you wish. In our case, we want to control the two links separately.

Copy and paste the two lines of JavaScript into link for the home page (again, note that the name given to the image, 'home' appears in both lines of the script). Next, copy and paste the name image into the image tag so the JavaScript will know what to control.

Repeat this procedure for the link back to the JavaScript page, copying and pasting the information both to the link tag and the image tag. Before saving, though, you need to assign a distinct name to the second image (otherwise only one of the two images would change). Where you see 'home' in the two lines of JavaScript, change the word to 'back' (no quotes, though). Then change the name in the image tag to 'back' as well. Finally, change the image names to backon.gif, back.gif and back.gif respectively so we'll be loading the right image. Save, and reload the page in your web browser. Now when you pass your mouse over either image, it appears to brighten.

This kind of trick isn't to hard to do, but it requires that you have two images to swap. If you don't have access to an image editing program like PhotoShop you may not be able to use this script.

The second kind of mouse over event is subtler, but it doesn't require swapping images. By adding the JavaScript

onMouseOver="window.status='INSERT YOUR TEXT HERE' ; return true"

inside a link, you can make the status line (the bottom pane of the browser window) show text descriptions instead of the URL for the link. An example of a full link with this script would look like this.

Be sure to pay special attention to double vs. single quotes. One slip up and all you'll see when you load your page is a box with a JavaScript error.

A note: I've saved this page again under the file name mouse2.html so you can restore the page to its original, un-JavaScripted self.