1. Technology

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blmo.htm

was emailed to:

Thanks for sharing About.com with others!

Mouseover Script

1. Instructions

clr gif
More of this Feature

Generator Form Mouseover Links

One of the most common scripts that people use on their web pages is the mouseover script where one image is replaced by another when the mouse cursor is moved over the image and changed back when the mouse moves off. Those not familiar with Javascript can easily implement this feature on their web pages using the form on the next page. This form generates a mouseover script that will not generate errors in browsers that do not support the mouseover functionality and which preloads the alternative images so that they don't have to be downloaded when the mouse first moves over the original image.

To use the form all you need to do is to enter the address of both the original image to be displayed on your page and the one you want it replaced by when the mouse is moved over it. You also need to enter the width and height of th images (which sould be the same for both) and alternate text to be displayed by those viewing the page with images turned off.

Once you have entered that information simply select the Add Images button and the required Javascript and HTML for your mouseover image will be created. To create multiple mouseover images for display on the same web page simply repeat the process without refreshing the page. This will add the additional mouseover code to that already generated.

Once you have generated all of the mouseovers you require for your web page, copy the Javascript code into a new file called mo.js (if you are going to put mouseovers on multiple pages then add part of the page filename onto the front of the filename to keep them separate). You then attach this script into the head section of your page using the following code:

<script type="text/javascript" src="mo.js">
</script>

The next step is to copy the HTML for the various Image Tags and paste them as code into the body section of your web page where you want each image to appear. Unless you want all of the images to appear next to one another this will mean pasting each piece of HTML to a separate spot on your page.

One final comment regarding the HTML that the form generates. The generator form creates the mouseovers using span tags. Netscape 4 does not support mouseovers using this tag and you must use the mouseover link form (setting the link destination to #) if you want mouseovers that will work on Netscape 4.

So now you know what you will need to do, you can now start creating your mouseovers, just don't create too many mouseover images on the same page as each requires approximately twice the time to download of a single image.

Instructions | Generator Form | Mouseover Links

©2014 About.com. All rights reserved.