Creating Rollover Images in Dreamweaver CS5

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

Rollover Image 1
First, "unpressed" image

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

Rollover Image 2
Second, "pressed down" image

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
    Insert Rollover Image
  2. Fill out the “Insert Rollover Image” form
    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.

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.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.


One thought on “Creating Rollover Images in Dreamweaver CS5”