Dreamweaver Tutorial - Roll Overs

Creating Image Rollovers in Dreamweaver CS3

In this Dreamweaver Tutorial you are going to learn just how easy it is to create buttons that change when a user mousse over them, this is called a “ Roll Over”. Before programs like Dreamweaver the web master would have had to write many lines of complex JavaScript code to accomplish this task, but we have come along way since then, and this can now be achieved with a couple of mouse clicks.

View Dreamweaver basics in video format: Beginners Dreamweaver Tutorial Videos.

Create the images
Before we get started creating the necessary code in Dreamweaver you should have already have created the images with a program such as Fireworks or Photoshop, it is important to remember that the images should be the same size otherwise one image will be distorted. I have created the two images below for this example.

image 1.0

Lets add the code with Dreamweaver .
With our two images created and located in our images folder we are ready to begin. From the main Dreamweaver menu select Insert > Image Objects > RollOver Image. ( image 2.0)

image 2.0

This will launch the Dreamweaver Inert Rollover Image dialog box, the fields need to be populated to tell Dreamweaver which images to use, where to send our visitor to when the image is clicked and a few other aspects. The first field “ Image name “ should have already been filled in for you by Dreamweaver.

image 3.0

Select your Original image
The next field “ Original image” is the location of the image that we wish to use in the normal state, clicking on the button “ Browse “ next to this field will allow you to navigate to the image on your local computer.

The Rollover image field is of course the location of the image that we wish to swap with when the user moves their cursor over the original image, it is advisable to leave the default checkbox “ Preload rollover image “ checked, this makes the clients browser download all the images used in your rollover first and makes for a much more smooth effect.

Other Options
The Alternate text field is optional, if filled in when the rollover is activated this text will be displayed under the image, this is also useful for people that have images switched off.

Setting the URL of the button
Enter into the “ When clicked, Go to URL “ field the link of the page that you wish to user to go to when clicked, if you leave this field empty Dreamweaver will assign it as a null link and place the # in the field.

A working example
And here we have a working example of what you can simply create in Dreamweaver in a little under five minutes without having to type a single line of JavaScript code.