Infinite Fish: RollOver MegaCoder

~ Infinite Fish ~

RollOver MegaCoder

Have you ever wondered how some websites have images that change when you move your mouse cursor over them? Would you like to add that to your own pages, but don't have time to learn how to program it yourself? The purpose of the RollOver MegaCoder is to help with just that. Simply fill in the appropriate fields below, and click "Generate Code" to have the necessary Javascript code automatically created for you. The effect will work in Netscape Navigator 3.0+ and MS Internet Explorer 4.0+, and will not "explode" with error messages in older browsers. If you already have the images you want to make interactive on-line, you can preview the effect before adding it to your own page! Even if you know how to create RollOver effects with images, this utility may save you some time!
Note: Animated GIFs will work great as the Original or RollOver images! Try some interesting animation effects!

Questions/Comments/Suggestions?
Email me: sb@infinitefish.com.

~ Image Locations ~
Original Image (Image URL)	http://
RollOver Image (Image URL)	http://

~ Link Options ~

Clickable?

Yes No

Link Destination
(Choose one type)

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

~ Image Options ~

Border Width (In pixels)

Alternate Text
(Displayed before image loads, or with a text-based browser)

Image Dimensions (In pixels)

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

~ 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 </html> tag.