Low Bandwidth Rollovers: Client-Side Image Maps | WebReference

Low Bandwidth Rollovers: Client-Side Image Maps


Low Bandwidth Rollovers:
using CSS positioning and Client-Side Image Maps for dynamic menus

EGAD! Not another rollover script!
Before you click our sponsor's banner to escape, ponder this:
In a 7 item rollover that traditionally uses 14 images, we will show you how to do it with 2 or even 1.

There's more: A double rollover (21 images) with 1. Don't get us wrong, our sponsor deserves a click, but after you've gone through the column. So, let's start.

NOTE: This technique is a 4th generation browser feature. It will not work in previous versions. You may, however, read and appreciate this article with any version although the advanced examples will not work.

Pass your mouse over the WebReference menu bar just below:

On first glance, this seems to be a traditional image-swapping rollover using the Image object introduced in JavaScript 1.1, and discussed at some length with additional features in our previous column. If this were the case, we would be using 7 images side-by-side to form the menu, and 7 more images that would be swapped for the effect. A total of 14 images to be loaded, with 14 Internet connections to be made and 14 files that may be corrupted!

In reality, however, we are using only 2 images. Image #1, is our default menu bar. Image #2 is positioned over Image1 and made invisible. When we pass our mouse over the links in Image1, the relevant part of Image2 is clipped and made visible, achieving the rollover effect. Got it? No? Then, let's go through it...

Step by Step

Create two images

We need an image for our visible menu...

...and one that will be used for our onMouseOver popups:

Create a client-side image map

Take the primary image:

That is,

This image is to be divided up by links into a client-side image map. We therefore define our coordinates:

and insert the appropriate HTML. Insert a unique name with USEMAP= into your IMG tag, to get:

The above HTML produces this result:

Pass your mouse over the menu. It is now 7 links. Check your status bar for proof, or click them, but don't forget to come back for the CSS positioning page.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 08/06/97
Revised: 10/16/97

URL: http://www.webreference.com/dhtml/column2/