Eyeland Studio: Custom Design
Member Log-In:  Go 
Forgotten password?
 HOME   GAMES   CONTACT   
· Products ·
 Template Foundry
 Games in a Flash


 Ping-A-Pal


 Custom Design

· Links ·
Games in a Flash
Triplejack
BestGuyWins
Edufunzone
iPlayworld
Rollover Effect Coder Lite
©2001 Eyeland Studio, All Rights Reserved.

Welcome to the Rollover Effect Coder Lite
This useful tool helps in creating Javascript code to handle rollover effects, allowing you to make buttons that "light up" or "come alive" when you interact with them using the mouse. Simply follow the steps below and you'll be on your way. Read the yellow box on the right to find out about the powerful Pro version!

1.Define the Off-State and On-State Images
Off-State Image
(absolute URL)
http://
On-State Image
(absolute URL)
http://

2.Define the Button's Link
Clickable? Yes No
Link Destination
(Choose one type)
WWW link:http://
EMAIL link:mailto:

3.Adjust 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:

4.Test the Rollover
To test your rollover effect, click the Test Effect button below.

5.Copy and Paste

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.


This code segment will preload the On-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.

Get the Pro Version!

The Rollover Effect Coder Pro is a free bonus when you purchase Photoshop Web Foundry or Interface Foundry and is accessible in the Interface Foundry member area.

The Lite version of the Rollover Effect Coder can only handle very basic rollover effects, such as changing one image to another on rollover. The Pro version has been completely re-designed and features vastly improved capabilities and a new dynamic interface. With the Pro version, you can:

Create Animated Rollovers:
Add/remove any number of frames, manually specify inter-frame delay times, and specify images for each.

Apply Dynamic Effects:
Internet Explorer 5.5 includes a dynamic visual filter engine that the Pro Coder supports. Create animated drop shadows, adjust alpha blending (opacity) on each frame, and toggle images between color and grayscale.

Easily Create Multiple Effects:
The Pro Coder is designed to generate efficient source code that uses a naming scheme that shouldn't conflict with other code or other rollover effects on the same page. So all you have to worry about is experimenting and copying-and-pasting.

Pro Examples:

In this example, 10 images are used to animate a metal logo being "built". Notice how the animation starts to "build" on rollover and "unbuilds" back to nothing on rollout. It will only "unanimate" as much as was "animated" while the cursor was over the button:
· metal logo

These examples use dynamic effects specific to Internet Explorer 5.5, so they won't animate in other browsers such as Netscape. However, no preloading is necessary with these, so they are very efficient:
· fade pulse
· pop out
· bouncing logos

Take a Peek at the Interface

Here's a vague idea of the options available to you when building an animated rollover with the Pro Coder:

Design Now
  Games In A Flash — custom flash games  
©1999-2005 Eyeland Studio Inc.   All Rights Reserved.