Once upon a time, I was a member of HTML Writer’s Guild and used to participate in their mailing list discussions as well. Here’s an old post I came across today while cleaning my system that’s probably still relevant.
Notice the date on which it was written. Ancient, huh? And yes, we did write the markup in CAPS back then.
HTML Image Maps Tutorial for Beginners
Written on Tue, 30 Dec 1997 01:55:49
When we use image maps, we are essentially defining areas of a picture as “hotspots” and the action to take when that “hotspot” is activated.
Let’s take an example. A car. You want it to be that when you click on the glass, it takes you to the page giving finer details of glass and when you click on the rest of the body, it takes you to finer details of how the car was painted. For this, we are going to “map” the image to different “HREF” links. How?
The standard, minimum recommended image tag is:
When we want the image to use a map, we add a "usemap" attribute. So, the image tag becomes:
<IMG SRC="car.jpg" ALT="A car" WIDTH=100 HEIGHT=50 usemap="name">
Now, we are telling the image to use a map. But where is the map? We have to define it first. How do we do it? We use the <MAP> tag. We also have to give it a name which we will specify in the “usemap” attribute. Let’s see what I mean:
<MAP NAME="CAR">
</MAP>
So, the image tag will be:
<IMG SRC="car.jpg" ALT="A car" WIDTH=100 HEIGHT=50 usemap="#car">
As you might know, we use the “#” to tell the browser that the what we just referenced to exists in the same HTML document somewhere (usually people put the maps near the end of the document). So, it turns out that we use the “name” attribute in the “MAP” tag to bookmark the map and we can put a reference to this bookmark just as we would to any other standard <A NAME=”name”> bookmark in a HTML file. Notice something? The procedure remains the same. Only, since the content of the bookmark are mapping directions, we use <MAP> & </MAP> instead of the usual <A> & </A>. Easy till now? It gets simpler.
So now we know how to set a bookmark to mapping directions and we know how to call it for an image. Now we see how to “program” these directions for an image. Fine?
What comes between the <MAP NAME=”name”> & </MAP>? There is only one thing that can be used here – the <AREA> tag which defines areas on the image which refers to the map. Then we tell it which shape to use and what the coordinates,etc are for that shape. Then we specify what action to take. If no action is given, no action will be taken as a default. See? It’s simple.
Now you know it as well as I do that we can specify parts of an image like that only by addressing actual pixel values of the image. Let’s use our example here.
Remember the car image above? Its width is 100 pixels and height is 50 pixels. Let’s define two equal vertical bands. We do it by defining two rectangles using the “RECT” shape. The “COORDS” attribute is specified as left-x,top-y,right-x,down-y. Here is the map. See for yourself:
<MAP NAME="car">
<AREA SHAPE="RECT" COORDS="1,1,50,50" HREF="front.html">
<AREA SHAPE="RECT" COORDS="51,1,100,50" HREF="back.html">
</MAP>
Get it upto here? Let’s do it across now:
<MAP NAME="car">
<AREA SHAPE="RECT" COORDS="1,1,100,25" HREF="top.html">
<AREA SHAPE="RECT" COORDS="1,26,100,50" HREF="bottom.html">
</MAP>
Then you can map circles using SHAPE="CIRCLE" with the COORDS in the format "x-centre,y-centre,radius". A sample line:
<MAP NAME="sample">
...
<AREA SHAPE="CIRCLE" COORDS="10,10,10" HREF="abc.html">
...
</MAP>
But what if you don’t want a rectangle or a circle but a triangle? To overcome this, the shape tag of “POLY” is used. It’s COORDS use pairs of x-y positions to form any shape you want.
For example, to make a diamond in our car and then to make is clickable, we use the map:
<MAP NAME="car">
<AREA SHAPE="POLY" COORDS="50,1,1,25,50,50,100,25" HREF="abc.html">
</MAP>
The first pair, “50,1” means: 50 to the left (middle of the image) and pixel line 1 (the top of the image). The second pair, “1,25” means: 1 to the right (the extreme left of image) and 25 down (the middle of the image). And so on…
And if two areas overlap, the first defined takes preference. For example, if we were to make the flag of Japan clickable, we could use a map like this:
<MAP NAME="JAPAN">
<AREA SHAPE="CIRCLE" COORDS="50,25,20" HREF="red.html">
<AREA SHAPE="RECT" COORDS="1,1,100,50" HREF="white.html">
</MAP>
Since we defined the circle first, on clicking that area, the action it specifies is taken.
Have fun!
