Rollover images are flashy yet simple visual effects that can help your website to stand out from others and may even unwittingly aid visually impaired viewers. If you are even an occasional web user, I’m sure you have encountered them before. Any button that has ever changed as you rolled your cursor over it is likely a rollover image.
How Rollover Images Work
You might be inclined to think that this feature is technical and hard to execute. To that, I’d say: you’re somewhat right.
Create a Rollover Image
To create a rollover image:
In the Insert Panel, go toInsert –> Image Objects –> Rollover Image
Fill out the “Insert Rollover Image” form
Notice that there are fields for:
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.
That’s all there is to it! Dreamweaver will then write and insert the code into the document for you.
I’d love to see any image rollovers this post may have helped you make, so feel free to comment with questions or feedback!
Hear about our latest Adobe blogs, classes, and webinars by signing up for our newsletter.
Webucator Delivers Instructor-led and Self-paced Training