Rollover Images

Before you begin, create a second version of your button ("save as").  See above.



You might be inclined to think that this feature is technical and hard to execute. To that, I’d say: you’re somewhat right.

It typically requires some knowledge of JavaScript, which, depending on your programming background, may be nothing or could be a daunting task. The mechanics behind the coding are simple, however: all a rollover image does is replace one image for another! No wild and crazy animation necessary–it’s as simple as that.
But, still, what about knowing JavaScript? Dreamweaver CS5 can save your life here since–as with many features involving coding–Dreamweaver can simply do it for you!

Create a Rollover Image

To create a rollover image:

1. In the Insert Panel, go to Insert –> Image Objects –> Rollover Image
   
2. Fill out the “Insert Rollover Image” form
   

Notice that there are fields for:

• Image Name – a unique name that is used by JavaScript.  Do not use spaces.
• Original Image – the image that will appear when the mouse is NOT hovering
• Rollover Image – the image that will appear when the mouse is over the image
• Preload rollover image – Check this box.  It forces the rollover image to be loaded by the browser when the page is loading so that it will be ready when it is needed.  Otherwise the browser will have to ask the server for it later and there will be a delay when it is rolled over.
• Alternate Text – Text to appear in a “tool tip” when the mouse is over the image and if the image is not able to load (for example if the user has images turned off or is using a text editor or screen reader for blind users).
• When clicked, Go to URL – This is the link.