** 1 page regular HTML Tutorial / 771 words **

Neil Jones-Rodway takes a look at "clickie-piccies"...

If you've had a chance to play with images since last time you may well have used images to produce a menu to take the reader to various links. Instead of using individual images for each menu item they can be combined into a single image. This offers a couple of advantages when used on-line:
** bulleted list **
* The filesize of a single image will be smaller than a series of individual images.
* You can be sure the relative positioning of the images will remain exactly as you intended.
** end list **

** IMG1.GIF here **

Imagemaps are what we need. They came about fairly early on in HTML's development and provide a method of making selected areas within an image "clickable" - ideal to creating menus from a single image.

Originally the clever stuff was handled by the web servers - the browser would send the server a pair of co-ordinates (indicating where on the image the mouse was clicked) which the server then checks against a map file and informs the browser which file it should be getting.

Although imagemaps handled by web-servers worked well it wasn't an elegant solution suffering serious shortcomings:
** Bulleted list **
* Because a server was needed imagemaps could only be used on-line.
* Different servers implemented the map file in different ways!
* Browsers had no way of knowing which bits of an image were clickable, so map files had to contain a default link which would used if a non-defined area was clicked on.
** end list **

Eventually, an sensible alternative called "Client-Side Imagemaps" emerged. Client-Side imagemaps hold a description of the clickable parts of an image in the HTML file itself which means they can be used both on-line and off-line and browsers can interpret the clickable areas of the image locally.

Since most modern browsers (CAB included) support Client-Side Imagemaps let's consign web-server imagemaps to the dustbin of history and explain how to handle Client-Side Imagemaps.

The image map itself is a collection of areas linked to a URL - the areas can be described using circles, polygons, or, more commonly, rectangles (now seems a good time to point out CAB 1.5 only supports rectangles whereas CAB 2 supports all three). 
A rectangle is defined by specifying the co-ordinates of the top-left and bottom-right corners of the clickable area or "hot-spot". To make the job easy use an art package which can display the cursor co-ordinates. Circles are specified by specifying the co-ordinates of the circle's centre point and its radius (in pixels). Polygons are specified using a list of co-ordinates, one pair per vertex.

So how does this look in HTML? Well, somewhere in the HTML source you need to describe the image map:

** non-proportional font on **
<MAP NAME="...MapName...">
<AREA SHAPE=...ShapeType... COORDS="...Coordinates..." HREF="...URL...">
<AREA SHAPE=...ShapeType... COORDS="...Coordinates..." HREF="...URL...">
.
.
.
</MAP>
** np font off **

The syntax of each individual line varies according to the shape as follows:

** non-proportional font on **
<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...">
** np font off **

So taking our example menu image and having jotted down the co-ordinates of the "hot areas" it's easy to setup the imagemap:

** non-proportional font on **
<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>
** np font off **

To use the imagemap, we need to add another parameter (USEMAP="...MapName...") to the image tag as follows:

** non-proportional font on **
<IMG SRC="menu.gif" ALT="Menu" USEMAP="#Menu">
** np font off **

Imagemaps have one inherent flaw. Because they use images they're not much use for text-based browsing! For this reason it's good practice to provide alternative text based links - eagle eyed surfers may have spotted these next to image maps or at the bottom of each web page.

That's it for this issue - have fun brushing up your image or your image maps!

** IMG1.GIF **
** Caption **
Here's an example image designed to be used as a selection menu

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

** IMG3.GIF **
** Caption **
The image map menu in action on a page, complete with alternative text links

** IMG4.GIF **
** On Reader disk logo here **
** Caption **
The HTML source