Dreamweaver Tutorial Links

Creating JavaScript rollover image links in Dreamweaver:
A rollover image is an image that appears to change when a visitor points to the image with the mouse. The button can change color, shape or even get bigger or smaller. How is this possable, well it's just a web design trick, the image is changed for a different image.

A rollover is two images: the image displayed when the page first loads in the browser, and the image displayed when the pointer moves over the original image all images can be pre-loaded to make the effect look like it happens right away.

To start with we will make the images the same size, in a later Dreamweaver tutorial we will show how you can use images of different sizes, and also how to roll over a image and have a different image on another part of the page change.

To create a rollover:
Open the RU Playing site and select the page clubnews.htm page if it’s not the current page.
In the Document window, click in the cell top right ( text says "new items" ). RU Playing page, for example, double-click in the top cell and Delete all the text
Choose Insert > Interactive Images > Rollover Image from the Dreamweaver menu bar, or click on the roll over image in the objects panel.

In the Insert Rollover Image dialog box, type a name for the image, which is roll1 in the Image Name text box.
This allow the image to have a unique name for the JavaScript code.

In the Original Image text box, click Browse; then navigate to the images folder on the training CD ( if you have not already copied the files to your local machine) file in your site’s images folder then select the image roll2.jpg and click OK .
The Original Image text box indicates which image to display when the page first appears in the browser.

In the Rollover Image text box, click Browse; then navigate to roll2-on.jpg in your site’s images folder.
The Rollover Image text box indicates which image to display when the pointer is pointing to the image in the browser.

Make sure the Preload Rollover Image option is selected so the rollover images load when the page opens in the browser. This will ensure that all images are downloaded before the page is shown, this allows a fast effect.
In the When Clicked, Go To URL text box, click the Browse button and browse to new-items.htm.
The new-items.htm file is the file that you was working on in the last tutorial, so this step causes the rollover image to link to the page that you’re placing the rollover image on.Once we have changed the one image, you may wish to do this with all the images in the set and create all the top images to rollovers. Please note we will be changing this to a Library item in the Dreamweaver tutorial ref number 23, so please ensure that you save this file to your local machine, within you defined site.

Click OK to close the dialog box.

Save your document.
To see the effect you must preview the web page within the browser window, the shortcut key for this is F12. It is a good idea to use short cut keys as much as possable, this will allow you to work much faster, for a full layout of all short cut keys in Dreamweaver read the PDF document which is on the Training CD in the Tutorial folder.