How to Create a Rollover Image Using Adobe Dreamweaver

If you have ever edited or revised ANYTHING, you should know how wonderful it feels to see your finished product compared what it started out as. The same goes for photos. Problems may lie in how you actually look at the photos when you are trying to compare them side by side. Some people may not catch subtle differences unless the image are superimposed or in the same space. This is where creating a rollover image can help you out. To clarify, a rollover image is an image object that shows one picture when a cursor is hovering over it and shows another when the cursor is away from the object.


Once you select where in the source code you want the object, select Insert > Image Objects > Rollover Image (below).

In the window that pops up, you can name the object whatever you like. The important step is inserting the two images you would like to display. The “Original image” is the one that displays when the cursor is not hovering over it. The “Rollover image” is the one that displays when the cursor “rolls over.” If you want this image to be a link, type the URL in the bottom field (“When clicked, go to URL”).


I inserted a picture that I edited with Adobe Photoshop and its corresponding original. I wanted the edited photo to appear as the rollover image. To illustrate how the rollover object works, here’s the original:


and here is the edited version:


The cursor should change from the pointer to the . . . Mickey Mouse glove . . . when it rolls over the image. These make fun hyperlinks, too!


Jarad Kmietowicz


~ by jmk186 on October 3, 2011.

%d bloggers like this: