Rollover Generator

"); prev.document.close(); } function Instruct() { help = open("","helpWindow","resizable=yes,location=no,toolbar=no,directories=no,status=no,scrollbars=yes,menubar=no,width=500,height=250") help.document.write("Image Mouseover Help") help.document.write("

Instructions

") help.document.write("

1. Enter the URL for the complete path of the original image you want.

") help.document.write("

2. Enter the URL for the complete path of the rollover image you want.

") help.document.write("

3. Determine if you want to link the image to a ne page. If you do then click the yes dot.

") help.document.write("

4. If you clicked yes in the previous space then enter the URL that, when clicked, the link will take you to. This is optional!

") help.document.write("

5. Determing the border width in pixels.

") help.document.write("

6. Enter the alternate text that will be seen when holding the cursor over the image.

") help.document.write("

7. Determine the size,width and height, you want the images to be. The get dimensions button will attempt to provide this information for you.

") help.document.write("

8. When you are satisfied with your selections, click the Generate Code button.

") help.document.write("

9. If you would like to see the effect, click the Preview Effect button.

") help.document.write("

10. Your code will appear in two boxes below the buttons. The upper code is the rollover code. The bottom code is used to preload the images. Optional

") help.document.write("

") help.document.bgColor=('deepskyblue') help.document.close() } // -->

Advanced Image Mouseover Generator

Image Locations
Original Image	(Image URL) http://
Rollover Image	(Image URL) http://

Link Options

Clickable?

Yes No

Link Destination
(Choose one type)
(Optional)

WWW link:	http://
EMAIL link:	mailto:

Image Options

Border Width

(In pixels)

Alternate Text

(Text displayed while holding the cursor over the image)

Image Dimensions

The Get Dimensions button will attempt to load the original state image and determine its dimensions automatically. Make sure the original image exists at the specified location.

Width:
(In pixels)

Height:
(In pixels)

Rollover Image Code

This code segment controls the rollover effect, and incorporates the images and settings from above. Copy and paste this code into the body of your HTML file at the point where you want the image and rollover effect to appear.

Preload Image Code

This code segment will preload the rollover state image, so that it might already be loaded by the time the user first rolls the mouse cursor over the image. Copy and paste this code into the bottom of your HTML file, just before the tag.

Advanced Image Mouseover Generator

Image Locations

Link Options

Image Options

Rollover Image Code

Preload Image Code

Simple No Frills Image Mouseover Generator