Images > Creating image maps > Creating a rollover image
Images > Creating image maps > Creating a rollover image |
|
A rollover is an image that changes when the pointer moves across it. A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.
Rollover images are automatically set to respond to the MouseOver event. For information about setting an image to respond to a different event (for example, a mouse click) or about editing a rollover image to display a different image, see Swap Image.
A more complex form of rollover image is a navigation bar. To create a navigation bar, use the Insert > Interactive Images > Navigation Bar command; see Inserting a navigation bar.
To create a rollover:
| 1 | In the Document window, place the insertion point where you want the rollover to appear. |
| 2 | Insert the rollover by using one of these methods: |
 |
In the Objects panel's Common category, click the Insert Rollover Image icon. |
|
In the Objects panel's Common category, drag the Insert Rollover Image icon to the desired location in the Document window. |
|
Choose Insert > Interactive Images >Rollover Image. |
| The Insert Rollover Image dialog box appears. | |
| 3 | In the Image Name field, type a name for the rollover image. |
| 4 | In the Original Image field, click Browse and select the image or type the path of the image you want displayed when the page loads. |
| 5 | In the Rollover Image field, click Browse and select the image or type the path of the image you want displayed when the pointer rolls over the original image. |
| 6 | If you want the images preloaded in the browser's cache so they load faster, select the Preload Images option. |
| 7 | In the When Clicked Go to URL field, click Browse and select the file, or type the path to the file you want to open when a user clicks the rollover image. |
| Note: If you don't set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work. | |
| 8 | Click OK to close the Insert Rollover Image dialog box. |
 |
To test a rollover:
| 1 | Choose File > Preview in Browser or press F12. |
| 2 | In the browser, move the pointer over the original image. |
| The display should switch to the rollover image. | |
|
|