Creating a Client-Side Image Map
Most modern programs have toolbars with various buttons that give you one-click
access to the program's most-used commands and features. HTML offers a couple
of techniques that provide similar convenience to the folks who trudge through
your site.
Build an Image Map
An image map is a Web page graphic with several defined "clickable" areas.
(These areas are also called hot spots.) You click on one area and a
particular Web page loads, and you click on a different area and a different
page loads. In other words, each of these areas is just a special kind of
hypertext link. Image maps give you much more flexibility than simple image
links because you have more freedom to arrange the links and you can use more
elaborate graphics (but not too elaborate; remember those poor surfers
on slow modem connections).
Until recently, setting up an image map was a complicated affair in which you
actually had to write a program that would handle clicks on the image and tell
the Web server which page to load. Although gluttons for punishment can still
take that road, the rest of us now have an easier method. The tall-forehead
types call this method client-side image maps, but a better name would
probably be browser-based image maps. In other words, in contrast to
the old method that required the intervention of a program and a Web server,
this new method has everything built right into the browser. You also get the
following extra benefits:
- Browser-based image maps are faster because the Web server doesn't have
to process any image map info.
- The browser shows the actual URL of each image map link. With
server-based image maps, all you get are the coordinates of the map.
- You can test out your map on your own computer before you load
everything onto the Web.
| Which Browsers Support Image Maps? |
Browser-based image maps sound too good to be true. Isn't there a catch?
Well, only one: since these types of image maps are relatively new, they aren't
supported by all browsers. However, Internet Explorer supports them, as does
Netscape Navigator version 2.0 and later, and most flavors of Mosaic. In other
words, the vast majority of today's surfers will be able to work with your
image maps. To handle those few old-timers with ancient browsers, you can
always include text links nearby.
|
For your image map to work correctly, you have to perform three steps:
- Decide on the distinct image regions you want to use and then determine
the coordinates of each region.
- Use the <MAP> and <AREA> tags to assign a link to each of
these regions.
- Add a special version of the <IMG> tag to your Web page.
The next few sections take you through each of these steps to show you how to
create your own browser-based image maps.
Step 1: Determine the Map Coordinates
All the information that you see on your computer screen is divided into tiny
little points of light called pixels. Suppose you went insane one day
and decided you wanted to invent a way to specify any particular pixel on the
screen. Well, since a typical screen arranges these pixels in 640 columns by
480 rows, you might do this:
- Number the columns from left to right starting with 0 as the first
column (remember, you're insane) and 639 as the last column.
- Number the rows from top to bottom starting with 0 as the first row
and 479 as the last row.
So far so good. Now you can pinpoint any pixel just by giving its column number
followed by its row number. For example, pixel 10,15 is the teensy bit of light
in the 11th column and 16th row. And because your insanity has math geek
overtones, you call the column value "X" and the row value "Y."
This "coordinate system" that you've so cleverly developed is exactly what you
use to divide up an image map, where the top left corner of the image is 0,0.
For example, check out the image displayed in the Paint screen shown below.
You use a coordinate system to divide up your image.
This image is 600 pixels wide and 100 pixels high, and it's divided into three
areas, each of which is 200 pixels wide and 100 pixels high:
- Area A: This area is defined by coordinate 0,0 in the upper left corner and coordinate 199,99 in the lower right corner.
- Area B: This area is defined by coordinate 199,0 in the upper left corner and coordinate 399,99 in the lower right corner.
- Area C: This area is defined by coordinate 399,0 in the upper left corner and coordinate 599,99 in the lower right corner.
Why bother with all this coordinate malarkey? Well, that's how you'll let the browser know what to do when the user clicks on the image. For example, suppose you want to load a page named A.HTM when the surfer clicks inside area A in the image shown above. Then you'd tell the browser (this is explained in the next section) that if the mouse pointer is within the rectangle bounded by the coordinates 0,0 and 199,99, then load A.HTM.
That's all well and good, but how the heck are you supposed to figure out these
coordinates? One way would be load the image into a graphics program, but I've
got an easier method. If you're running Netscape, all you have to do is set up
an HTML file with a link that uses the following format:
<A HREF="whatever"><IMG SRC="YourImageMap.gif" ISMAP></A>
Here, YourImageMap.gif is the image file you want to use for your map.
The ISMAP attribute fools the browser into thinking this is a server-based
image map. So what? So this: now load this HTML file into a browser, move your
mouse pointer over the image and—voil�—the image coordinates of the
current mouse position appear in the status bar!
For example, I used this technique to display the image shown below. To give it
a try, you just point at the corners that define the image areas and record the
coordinates that appear in the status bar.
To determine coordinates, set up your image as a link with the ISMAP attribute
and the browser does all the hard work for you.
This technique works with Internet Explorer 4.0. Earlier versions of Internet
Explorer don't understand the ISMAP attribute, so things are a bit trickier.
First of all, you must add the following text in the header of your page:
<SCRIPT LANGUAGE="VBScript">
Sub ImageMap_MouseMove(shift, button, x, y)
status = x & "," & y
End Sub
</SCRIPT>
Now set up your fake image map link as follows:
<A HREF="whatever" ID="ImageMap"><IMG SRC="YourImageMap.gif"></A>
Step 2: Use <MAP> to Define the Image Map
With your image coordinates now scribbled on a piece of paper, you can set about
defining the image map. To do this, you start with the <MAP> tag, which uses
the following general form:
<MAP NAME="MapName">
</MAP>
The MapName part is a name that you assign to this map definition. Next, you have to specify the clickable areas on the image. You do this by using the <AREA> tag:
<AREA SHAPE="Shape" COORDS="Coords" HREF="URL">
Looks pretty ugly, doesn't it? Well, it's not too bad. The SHAPE attribute
determines the shape of the area, the COORDS attribute defines the area's
coordinates, and the HREF attribute specifies the Web page to load when the
user clicks this area.
The COORDS attribute depends on what value you use for the SHAPE attribute.
Most image map areas are rectangles, so you specify RECT as the SHAPE and you
set the COORDS attribute equal to the coordinates of the area's upper left
corner and lower right corner. For example, here's an <AREA> tag for area
A in the example we've been using:
<AREA SHAPE="RECT" COORDS="0,0,199,99" HREF="a.html">
You then stuff all of your <AREA> tags between the <MAP> and <
/MAP> tags, like so:
<MAP NAME="TestMap">
<AREA SHAPE="RECT" COORDS="0,0,199,99" HREF="a.html">
<AREA SHAPE="RECT" COORDS="199,0,399,99" HREF="b.html">
<AREA SHAPE="RECT" COORDS="399,0,599,99" HREF="c.html">
</MAP>
Step 3: Add the Image Map to Your Web Page
Okay, it's all over but the shouting, as they say. To put all that fiddley
coordinate stuff to good use, you just toss a special version of the <IMG>
tag into your Web page:
<IMG SRC="YourImageMap.gif" USEMAP="#MapName">
As you might expect, YourImageMap.gif is the image map file. The key,
though, is the USEMAP attribute. By setting this equal to the name of the map
you just created (with an extra # tacked on the front), the browser will treat
the graphic as an image map. For example, here's an <IMG> tag that sets
up an image map for the example we've been using:
<IMG SRC="./coords.gif" ALT="An Image Map" USEMAP="#TestMap" WIDTH="600" HEIGHT="100">
The full working example is shown below so you can see that this stuff actually
works. Notice that when you point to area A, the name of the linked page
(A.HTML, in this case) appears in the status bar.
The image map is now ready for prime time.
Note, too, that you should also toss an ALT attribute into the <AREA>
tag to let non-graphical users know what's happening:
<MAP NAME="TestMap">
<AREA SHAPE="RECT" COORDS="0,0,199,99" HREF="a.html" ALT="Go to a.html">
<AREA SHAPE="RECT" COORDS="199,0,399,99" HREF="b.html" ALT="Go to b.html">
<AREA SHAPE="RECT" COORDS="399,0,599,99" HREF="c.html" ALT="Go to c.html">
</MAP>
Copyright © 1999
Bill Cassidy
|