| home / experts / dhtml / column2 |
 
|
|
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
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...
We need an image for our visible menu...
...and one that will be used for our onMouseOver popups:
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/
