Efficient Rollovers
In Macromedia DreamWeaver
Unless you have a specific JavaScript array already developed, DreamWeaver is the cleanest, most efficient method of creating rollovers. Image editors such as Adobe Photoshop and Macromedia Fireworks allow you to develop web pages with complex rollovers, but the code is bloated compared to what DreamWeaver outputs.
Image-swap Rollovers
There is very little reason to use rollovers for anything except navigation. And if your rollover is plain text, then consider using CSS to style your rollovers—you can still style buttons with borders or background images. Click here to see how. But if your rollover images are ready, then:
Suppose this is your default image (mouse "up-state.)
And this is what appears when your mouse "rolls over" the image.
Putting them together is as simple as choosing "Insert— Image Objects— Rollover Image..." After filling a dialogue box, you will have the rollover linked and a slew of JavaScript in the document head (view the "SCRIPT" tag in this page's source code:)
- To preload the images into the Browser's cache for instantaneous image swaps.
- To put back the original image if the mouse rolls out before clicking.
- To run the actual image swap.
Remote image swaps are useful for providing more information than the low-resolution browser window will permit. These are accomplished through a combination of JavaScript and CSS.
©2004 MadMac Creations
All recommendations are to be used at the reader's discretion, and is subject to change without notice. While a best effort is made to test software and techniques provided, the reader is advised to test thoroughly prior to implementation. MadMac Creations takes no responsibility for any losses accrued, unless Tony MacFarlane has been contracted.
