Creating Rollover Images and Buttons

This tutorial will illustrate creating rollover images and buttons in Dreamweaver CS5.

You have probably noticed that with some images on a web page they change when you move the mouse over them. Images that appear when the a mouse moves over an image are called rollover images, and the effect is achieved by actually having two images. One image is there in the page's normal state, the second appears in place of the first when the user moves their mouse over it.

Let's see how to do that in Dreamweaver.

Rollover Images

Here's a page with a small amount of text that's the basis for an advertisement.

We're now going to put a button on that page that invites the user to learn more about our company's products.

I have already created two buttons, and here they are side by side

The first button will appear on the page just below the text.

To insert it as a rollover image select the Insert menu, then Image Objects, then Rollover Image from the fly-out.

The Insert Rollover Image dialog appears.

First, give the image a name. I've called it seemore-button1, a name that should help me to remember what it is when I see it in my list of images.

Now I need to specify both the original image and the rollover image. I've already put them both in my images sub-folder, so I can browse to them both easily. Note that the filename of the first image is not the same as the name I'm giving the rollover image, i.e. seemore-button1. This rollover name is used for other things within Dreamweaver, and for those I won't use the filename.

I enter Alt text as usual, and finally the URL of the "target", i.e. the location (within or outside my site) that I want the user to be directed to when they press this button. We'll be returning to this a little later. For now, we'll just take them to our index.html page.

The completed dialog looks like this.

Note that Preload rollover image is checked. This means that when the user first arrives at the page containing the rollover both images will be downloaded straight away. If you don't check this option, when the user moves the mouse over the rollover image for the first time there may be a delay while the second button image is downloaded.

Now press OK and the button is in place.

The rollover image will not work in design view, so we need to look at it in Live View. Switch to Live View and the page looks like this.

Hover over the button and it looks like this.

To check that the button works in Live View, hold down the Ctrl key and press it. You should be taken to the Home page.

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Creating Rollover Images and Buttons in Dreamweaver CS5

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

This site proudly build with Site Build It!