*** HTML Tutorial/1 page/730 words/4 grabs/Neil Jones-Rodway ***
*** Standfirst: Neil Jones-Rodway takes a look at "clickie-piccies"...

By now you'll probably have played with using images as links. If you 
wanted to make a menu out of images, you'd have had to split your menu 
image up into lots of little images (lets call them "menulets"). This 
is a little messy, and doesn't make a good deal of sense on-line (a 
single image's filesize would be smaller than the collective size of 
all the menulets). 

For sake of an example, here we have a menu image. It could easily be 
split up into 6 menulets, but that would increase the file sizes from 
36Kb to somewhere nearer 45Kb. Also, with the overlapping nature of 
the bars you'd need to be careful in aligning the individual menulets.

Imagemaps came about pretty early in HTML's development to provide a 
way of making selected parts of images "clickable". Ideal, as you can 
imagine, for making menus out of single images.

Originally it was all done on the side of the web servers - the 
browser sends the server a pair of coordinates (indicating where on 
the image the mouse was clicked) which the server then checks against 
a map file and then tells the browser which file it should be getting, 
which the browser can then fetch. Confusing, no?

While it worked well enough, there were a few shortcomings. Firstly, 
the reliance on a server meant it could only be used on-line. 
Secondly, different servers implemented the map file in a couple of 
different ways. And on top of that, the browser had no way of knowing 
which bits of an image were clickable, and which were not - therefore 
map files had to contain a "default" link which would be chosen if 
none of the defined areas were clicked on.

Eventually, an alternative was worked out. "Client-Side Imagemaps", as 
they were called, held a description of the clickable parts of an 
image in the HTML file itself, meaning the browser knew which parts of 
the image had links associated to them and which didn't. Being in the 
same file, it also meant they could be used off-line.

As all modern browsers (CAB included) support the newer imagemaps 
method there is little point in explaining how they used to be done, 
so we'll just go headlong into the Client-Side Imagemap syntax.

The image map itself is a collection of areas that are linked to a URL 
- these shapes can be circles, polygons, or far more commonly 
rectangles (this would be a good time to point out that CAB 1.5 only 
handled rectangles. CAB 2, however, handles all three). 

A rectangle is specified by giving the coordinates of the top-left and 
bottom-right corners of your hot-spot. Most art packages show you the 
current coorinates as you move the mouse pointer around, which is 
ideal for doing this job. A circle is specified by giving the 
coordinates of the circle's centre, and its radius (in pixels). 
Polygons are simply represented as a list of coorinates, one pair for 
each point.

How does this translate into HTML? Well, somewhere in the HTML source 
you need to describe the image map:

<MAP NAME="...MapName...">
<AREA SHAPE=...ShapeType... COORDS="...Coordinates..." HREF="...URL...">
<AREA SHAPE=...ShapeType... COORDS="...Coordinates..." HREF="...URL...">
.
.
.
</MAP>

Each individual line's syntax depends on the shape, and can be one of:

<AREA SHAPE=RECT COORDS="x1,y1,x2,y2" HREF="...URL...">
<AREA SHAPE=CIRCLE COORDS="x,y,r" HREF="...URL...">
<AREA SHAPE=POLYGON COORDS="x1,y1,x2,y2,x3,y3..." HREF="...URL...">

So lets go back to our menu image. Having jotted the coordinates of 
the "hot areas" down on a piece of paper, making the imagemap is easy:

<MAP NAME="Menu">
<AREA SHAPE=RECT COORDS="3,18,230,51" HREF="tv.htm">
<AREA SHAPE=RECT COORDS="3,63,230,96" HREF="music.htm">
<AREA SHAPE=RECT COORDS="3,108,230,141" HREF="atari.htm">
<AREA SHAPE=RECT COORDS="3,153,230,186" HREF="movies.htm">
<AREA SHAPE=RECT COORDS="3,198,230,231" HREF="news.htm">
<AREA SHAPE=RECT COORDS="3,243,230,276" HREF="misc.htm">
</MAP>

Now to use this imagemap, we just need to add another parameter 
(USEMAP="...MapName...") to the image tag as such:

<IMG SRC="menu.gif" ALT="Menu" USEMAP="#Menu">

Imagemaps do have one inherent flaw - as they rely on images, they 
tend to be a bit useless for people who browse with graphics off! For 
this reason it's good practice to repeat the links as text elsewhere 
(either next to the image or at the bottom of the page) - eagle-eyed 
readers would have probably noticed this practice out on the World 
Wide Web.

Thats all there is to this issue - the next installment will gloss 
over those little things not yet covered, but can be quite handy.  
Until next issue, have fun!

*** IMG1.GIF
*** No caption - just place it near the line "For sake of an example, 
    here we have a menu image" near the beginning

*** IMG2.GIF
Here you can see the "hot areas" superimposed over the menu image.

*** IMG3.GIF
The menu page in action, along with a set of text links.

*** IMG4.GIF
And, of course, the HTML source!