Search

Sponser

Friday, 19 October 2012

Inserting rollover images


You can insert rollover images in your page. A rollover is an image that, when viewed in a browser, changes when the pointer moves across it.
Before you begin, obtain one or more pairs of images for the rollover. You create a rollover with two image files: the primary image (the image displayed when the page first loads) and a secondary 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, Web Page Maker automatically resizes the second images to match the properties of the first image.

To create a rollover:

1. Select Insert > Image Objects > Rollover Image.

2. The Rollover Image dialog box appears, complete the dialog box.
(1) In the Original Image text box, click Browse.. and select the image you want displayed when the page loads.
(2) In the Mouseover Image text box, click Browse.. and select the image you want displayed when the pointer rolls over the original image.
(3) (Optional) In Mouseover sound box, click Browse.. and select the sound file you want when the pointer rolls over the original image.
(4) (Optional) In Alternate Text, enter text to describe the image.
(5) Click the Hyperlink button at the lower left corner of the Rollover Image dialog box, set a hyperlink that you want to open when a user clicks the rollover image.


Note: If you don't set a link for the image, Web Page Maker 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.
(6) Click OK to close the Insert Rollover Image dialog box.
You can see the effect of a rollover image in Preview window, move the pointer over the original image. The display should switch to the rollover image.

Recommeded Links