Unit 6. Inserting Images (II)

Inserting Rollover Image.


A rollover is an image replace by another when the mouse is over it. This kind of image is used on menus and buttons.

Here, there is an example of a rollover. Point at it to see what happens.

pulsa para visitar aulaclic

If you want to insert a rollover, you need to go to Insert menu, Image objects, and then Rollover Image. In the new window specify the original image and the one that will substitute the former.

It's preferable to activate the Preload rollover image option. If it's active, the rollover image loads when the page loads, so we avoid a download delay when we're over the image.

The Alternate Text is the text you will see when you place the mouse over the image, or the text that will show up when of the image cannot be shown in the browser.

Alternate text can be assigned to all images, not only to rollovers. You can do this through the Alt field in the Properties inspector of the selected image.


Flash Buttons

There is another set of special images similar to rollovers that are used to create menus, these are the Flash buttons.

Below we see an example of a flash button. Place the mouse over it to see what happens.

To insert a flash button you need to go to the Insert menu, Media, and Flash Button option, and you will see this dialogue box:

Through Style you can select one of the button formats offered.

In this window you have to set the text that will be shown in the button (Button text:), the name of the object in order to be saved (Save as:) and the associated link (Link: and Target:).

It's better to save Flash buttons in the same directory of the HTML files, instead of the assigned folder for images. If you don't do this it is possible that the button doesn't work propperly if the url is not an absolute one (because if it is relative and the button is saved in the images folder the URL must be relative to that path).

Remember that buttons will be saved with a SWF extension.

Through the Properties inspector of the flash button, you can edit its attributes again:

The dialog window can be opened by clicking on the Edit button, and through the Play button you can check the button status from Dreamweaver whithout it being necessary to open a browser's page.

After testing the flash button status, you need to click again on the Play button (which will have changed to a Stop button) .

To practice you can perform the Step by step exercise on Creating Flash buttons.

  Go to the previous page page Content  Go to the nex page  

Page. 6.2