Mouse-Overs

A mouse over effect allows you to change an image on a web site when the mouse rolls over an image, or when the image is clicked on. It's very common on web pages and is implemented with JavaScript and additional images. An example would be a blue button that changes color to green when the mouse moves over the button, and then changes to red when the button is clicked.

There are three possible images used. The default image is the image shown when there is no action. The mouse-over image is shown when the mouse pointer is rolled over the image. The on-click image is shown when the mouse button is clicked on the image.

To create the JavaScript code, click on the Default Image, Mouse-Over Image and On-Click Images and select the images for each one. Set the default location on the web server for each image. The default directory and web site can be set on Options on the Front Tab.

Once the images have been entered, set the button web page link. This is the page or web site that the button will bring up when it is clicked.

After everything has been entered, click on Create Mouse-Over Code. The Java Script will be copied to the field under the button. Once the code is there you can then copy it to the web page editor that you use to create the mouse over effects. One section goes in the <HEAD>...</HEAD> section and the other section goes into the <BODY>...</BODY> section. Make sure that the code is copied to the right area or the effect wont work.

You can also preview the code in the web browser to make sure it works properly.

Notes:

The graphics will need to be copied to the web server before they can be previewed.

You can omit either the On-Click image or the Mouse-Over image. The default image is required.

If the image does not appear in the preview, make sure it has been copied to the website and is in the right directory with the correct name.