Web Design 1

Dreamweaver Swap Images

4/29/08

You have probably seen image rollovers before.  It is an image on the web page that changes when you move the mouse over it.  Check out the examples below.  There are two separate images, and Dreamweaver has created the code to tell them to switch between them when you move the mouse over it. 

Rollovers require two images to work.  The first image will be the image that the user sees first, and the second image is the one that appears on the 'roll over.'   So the first step is to make or find two images that are the same size and put them in your Web Design 1 folder.  Then from Dreamweaver, go to the main menu in Dreamweaver and select: Insert > Image Objects > Rollover Image.  In the window that pops up, tell it which two images to use.  You can also set a hyperlink here to make it into a working link -- or leave it out to just use the rollover as decoration.

** You can use an animated GIFs to make animated rollovers. 

• Assignment: Create a web page and name it "rollovers.html".
• Create 5 examples of rollover images. 2 of them must be buttons that you build in Fireworks (see second example below). The other 3 can be jpg images.
• You must use CSS 2 column float to lay out the page. You may use an external style sheet or an internal style sheet.