Next, we need to write a new function to be triggered when the user clicks on the Mouseover.

Note: must include return true after setting value in MouseOver (unusual special case).

By now I'm sure you're itching to know how to apply this to the humble Mouseover.

For example, the code for our "second" Mouseover would look like this:

If you've been following closely and fully understand the elements I've covered so far, assembling them into a working Mouseover should be almost obvious.

MouseOver changes the graphic displayed when the mouse cursor is over the graphic.

All that's left is to put the preloading of the Mouseover images inside the loadImages() function.

We pass these parameters to our function in any suitable event handler as shown in the following 'mouseover' and 'mouseout'example.

First, we must create JavaScript variables containing the filename of each Mouseover's "on" and "off" image.

Now all that's left is to modify the activate and deactivate functions so that, after changing the Mouseover image, it then changes the caption image.

One of the most popular "wow" items that is popping up all over the World Wide Web is the Mouseover.

Just as our normal Mouseover images need to have assigned NAME's, so too does our caption image.

Although the buttons on this site are fairly intuitive, the MouseOver feature helps to highlight which areas of the screen are buttons.

In its simplest form, the Mouseover is some part of a Web page that causes a change in the page display when the user's mouse passes over it.

Adding a "Down" Image Is it difficult to add a third image which is displayed when clicking on the MouseOver Link?

It's up to you to decide which is more important: having your Mouseovers work in Opera browsers, or preventing a half-loaded image from being displayed as your Mouseover.

And that's it -- we're left with a statement of the same form we used for our basic Mouseover, which will change the src property of the "third" image to "image3on.gif"!

Download may take 1 Minute MOUSEOVER to START.

NAME and HTML 4.0 I really enjoyed the article by Kevin Yank regarding MouseOver, I thought it was very well written.

Although this preloading technique does load the Mouseover images ahead of time, it is still possible for the user to trigger a Mouseover before the images have completely loaded.

CNET BUILDER.COM's SuperScripter: "The mighty Mouseover machine"

Yes, otherwise the onloaded images will come out as a grey rectangle. however, If you don't want the MouseDown picture to look different from the MouseOver picture, just load the same picture into both.

It does not support either the MOUSEOVER or MOUSEOUT event for client-side image maps, such as used for my Picture Index.

Our latest special is: Domain Registration (your name.com.au or your name.com - depending on availability), Web Site Hosting (basic level), 4 Web Pages with JavaScript Mouseover effect, Page Counter & Guest Book, etc.

Finally, this section will show you a simple way to make sure your Mouseover pages are compatible with older browsers, as well as a neat trick to prevent preloading Mouseover images from slowing down the rest of your page.