Multimedia and Technology Training At the UC Berkeley Graduate School of Journalism
You can insert a rollover image on a Web page so that when the page is displayed in a Web browser, the image will change to another image when the mouse cursor hovers over it.
First you need to use a program like Photoshop to create two images of the same size - the image that will be displayed on a Web page in a browser, and the second image that will be displayed when a mouse cursor rolls over it.
To insert the rollover image into your page, click in the spot on your page where you want the images to appear.
Then in the menu at the top select Insert...Image Objects...Rollover Image.
You'll get a panel that lets you select the two images you want displayed on your page.
Original Image: type in the name of the main image you want displayed on the Web page.
Rollover Image: type in the name of the other image you want displayed when someone rolls over the first image with their mouse cursor.
You also should type in some alternative text, which are words that describe the images you're about to insert on your page. This will help a vision-impaired person using a screen reader know what the images on the page are about.
You also can type a URL or a folder/file path into the Link field to turn your rollover image into a link to another Web page.
Click Choose (or OK) and the images will be inserted into your Dreamweaver document at the place you specified.
To see the rollover, save the page and then preview the page in a Web browser.
Comments? Contact us | ©2007-2009 The Regents of the University of California.
Add your comment
Login to post a comment.