How Can I Insert Rollover Images Perfectly Using Dreamweaver?

inserting rollover images with Dreamweaver

Have you ever visited a website and run your mouse pointer over the navigation links only to see them change?

If so, then you know what a rollover image is.

inserting rollover images with Dreamweaver

inserting rollover images with Dreamweaver

Rollover Images

Rollover images, as I suggested, are a web design trick most commonly used in web site navigation; whenever the visitor moves over one of these images with their mouse it will change to something else.

A rollover image actually consists of two different images – the primary image which is seen when a visitor lands on the web page, and a secondary image which is seen when the mouse crosses over the primary image.

Rollover Images And Dreamweaver

Before getting started, the first thing to do is make sure that you have both the primary and the secondary image that you are going to use ready for implementation.

Its best to make sure that both images are the same size, though Dreamweaver will take care of that if you forget.

Next, insert the primary image into your website, just as you normally would.

After that, you will then click on that image and do one of the following –

  1. On the insert menu click the Image objects and then select the Rollover Image command, or
  2. on the common option of the insert bar click on Rollover Image.

When the Rollover Image box appears you will follow the simple instructions and then click OK.

Now, when you preview your web page in a browser, you will see the primary image that you inserted and the secondary image will be visible when you mouseover it.

Once you’ve completed this task why not learn more web design basics.

About Lee Munson

Lee's non-technical background allows him to write about internet security in a clear way that is understandable to both IT professionals and people just like you who need simple answers to your security questions.

Speak Your Mind