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.

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...

<MAP NAME="mpMenu">
    <AREA SHAPE="RECT" COORDS="0,0   116,18" HREF="/">
    <AREA SHAPE="RECT" COORDS="117,0 181,18" HREF="/cgi-bin/suggest.cgi">
    <AREA SHAPE="RECT" COORDS="182,0 222,18" HREF="http://www.dotspecialists.com">
    <AREA SHAPE="RECT" COORDS="223,0 263,18" HREF="/new/">
    <AREA SHAPE="RECT" COORDS="264,0 339,18" HREF="/headlines/">
    <AREA SHAPE="RECT" COORDS="340,0 397,18" HREF="/search.cgi">
    <AREA SHAPE="RECT" COORDS="398,0 468,18" HREF="/index2.html">
</MAP>