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.
Pass your mouse over the WebReference menu bar just below:
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:
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 andAll Rights Reserved. Legal Notices.