Technique: Building an Image Map Rollover

One of the most popular Web page techniques today are known as rollovers. A rollover occurs when a user's mouse moves over an button or graphic and the button lights up or changes in some way. You'll see how to create regular graphics rollovers in Chapter 19, "Creating and Using Behaviors" of The Dreamweaver Bible. In this section you'll learn one method for applying the same technique to an image map. Portions of this technique were adopted from work by Peter Belesis' DHTML Tutorials at Mecklermedia's WebReference.com.

Before we get underway, keep in mind that this technique works only with 4.0 browsers and above, because of the use of layers. Evidently, it also will not work in the Macintosh version Internet Explorer 4.0 because that version doesn't support the clipping function used here.

While most of these steps can be accomplished in Dreamweaver's visual editor be aware that you will need to tweak the code in your text editor to complete the project.

If you'd like, you can download the complete zip file (58k).

All material contained herein is Copyright © 1988 Joseph Lowery, All Rights Reserved.