JavaScript : Mouse-overs

Move your mouse over the button.

Here's the JavaScript, which you would put in the HEAD portion of your HTML document to use the mouse over hilight:

So what is all that stuff?
I shall try and explain it, section by section.

The first part is just creating new image objects. First we assign the name 'testOff' as an Image and the what size the image is. For some weird reason the size is (height, width). The next line is telling JavaScript where it can find the source for the image, ie. the location. We do the same for 'testHi' which will be the hilighted image object.

The next section is defining our functions. We need to functions, one when the Mouse goes over the image, and one when the Mouse exits the image.

The function is passed the imgName, which is just the name of the image it is going to hilight. We then create the hilighted image object, this is done by taking the imgName adding on to it the Hi.src to get the image object variable we created above. The next command uses the imgName to find the object in the document, named in this case 'test', it then changes that objects src to our image object.

The other function does the same thing, but it creates a different image, one that is Off or non-hilighted, usually the image that loads on the page.

To use this JavaScript, you need to call it within your BODY section of your HTML document. If your hilighted image is a link, then the best place to put the function calls is in the anchor tag <A HREF... portion. This is because in early versions of Navigator, the anchor tag or links were considered objects which can be used by JavaScript, and images were not considered objects. Now everything on the page I believe, is considered an object.

If the image you wish to hilight with the mouse over is not a link just put the following code in the IMG tag, but you should make sure that you use version checking (see below).

In order to save space I have removed the width, height, and alt tags, these should be in each image you use. This helps the browser's layout manager and people using text-browsers, or screen readers.

There is a problem using just the above code. Netscape Navigator version 2.02 and prior, did not have a image object, so this would not work. So you need to do some version checking to insure that no errors will pop up if some one is using Navigator 2.0.

The script to do version checking is:

You don't have to change the image the mouse rolls over either. You can name another image and have that one change. All you need to do is to change the IMG NAME= tag. Here's an example, roll over the button again.

Here is an example of an even fancier JavaScript mouse-over concept. However, be careful how you use it. Specifically, do not implement this for navigation. The term for the mess that results is "mystery meat navigation." See Web Pages That Suck . com for details.