Mouseover Image Script

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 should 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:>

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.

Create your mouseover Javascript and HTML image tags with this form (unless you want to use the images to link to other web pages as well in which case use the mouseover links form instead). To clear all of the entries created so far just refresh the page.

Original Image:
Replacement Image:
Image Width:
Image Height:
Alternate Text:
JavaScript Code
Image Tags


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow