A HTML-feature that's very useful in many applications is rarely known: the Image Map. It is basically a simple image; but in it you can define any number of areas. When the user clicks on any one of these areas, the effect is like clicking a link.
Consequently you can build the most imaginative applications, with a seemingly simple image appearing to the user at first. The most obvious use you can make of it is a site map, giving a good overview of your site upon a glance.
Another class of applications to use image maps are all kinds of "computer based instructions" (CAI). Here the users are normally not linked to another screen, but they are getting feedback as to the quality of their clicking. For example, the image could be several solution alternatives. Over the image a question appears. The user is supposed to respond to it by clicking any of the alternatives. Depending on the one clicked, beneath the image any feedback could appear, say "Right!" or "Wrong!" (or pedagogically better equivalents of it).
HTML-Formalism
An image map is coded just like any other image, with one additional attribute 'USEMAP':
<IMG SRC="..." . . . USEMAP="#...">;
There is also a server-side image map ('ISMAP'), but for now let's concentrate on client-side image map.
The attribute 'USEMAP' is the name of the 'MAP' by which the areas are defined. (Don't forget the symbol "#"!) If we call it simply "map", the respective coding scheme is
<MAP NAME="map">
<area shape="..." coords="...,...,...,..." href="...">
:
:
</MAP>
The pertaining image would have to be coded with USEMAP="#map".
Within the <MAP> </MAP> clause, any number of areas may be defined (at least one). Currently they can be rectangular (shape="rect"), circular (shape="circle") or polygonal (shape="poly").
A rectangular area is defined by four coordinates: coords="x1,y1,x2,y2" (with x1,y1 being the x- and y-coordinate of the upper left corner, x2,y2 are the x- and y-coordinate of the lower right corner). A circular area has three coordinates only, coords="x0,y0,r" ( x0,y0 are the x- and y-coordinate of the center point, r is the radius [in pixels]). For a polygonal area you need to define the coordinates of all its vertices: coords="x1,y1, x2,y2, ...". (x1,y1 are the x- and y-coordinate of the first vertex, x2,y2 are the x- and y-coordinate of the second vertex, etc.).
The link is defined, as usual, by href=. Just as with normal links you can link here to any other html-file and/or to a bookmark, or to a bookmark in the same html-file. Or you can define the name of a Javascript: href= "javascript:...". When the user clicks the area, that Javascript is triggered. Thus, with a good map and some Javascripts you can do virtually "anything", depending on the place in the image clicked by the user.
By an attribute TARGET="...". you can direct the link to another window (or a new window, if you wish).
A good idea is to provide an attribute ALT="...". If a user has the browser graphics switched off, or if the image takes a while for loading, there is already an indication as to where clicking the area will link to.
By adding attribute TITLE="..." you can even have a 'tooltip' to an area. That's a small text on yellow background, popping up when the user moves the cursor onto the area and tests it there for about .5 seconds. When the area is clicked or when the cursor is moved away from the area, the 'tooltip' disappears. A tooltip can be used to give the user temporary hints - useful in a big, crowded image map.
So, with just a minor coding effort, you can apply all your imaginativeness for bringing user interaction into the game.
Details to image maps and many other features of web site design you can find at http://www.htmlgoodies.com/
Script To Find Out Areas
Intellectually it might seem not much, but finding out the right coordinates for all the areas requires quite a lot of leg work. You can make it easier by temporarily including the following Javascript into the <BODY> </BODY> part of your html-file. (When you are finished with all the coordinates, simply delete it - and you have a perfect image map. Or comment it out, if you can foresee future modifications to your image map.)
A useful tool for finding out the coordinates is:
<script language="JavaScript"> <!-- Begin var IE = document.all?true:false; if (!IE) document.captureEvents(Event.MOUSEMOVE) document.onmousemove = getMouseXY; var tempX = 0; var tempY = 0;function getMouseXY(e) { if (IE) { // grab the x-y pos.s if browser is IE tempX = event.clientX + document.body.scrollLeft - document.Show.offsetX.value; tempY = event.clientY + document.body.scrollTop - document.Show.offsetY.value; }
else { // grab the x-y pos.s if browser is NS tempX = e.pageX; tempY = e.pageY; } if (tempX < 0){tempX = 0;} if (tempY < 0){tempY = 0;} // Uncomment next line if you want to see mouse coordinates // in the browser's status line window.status = 'X = ' + tempX + ' Y = ' + tempY; // Uncomment next lines if you want to see mouse coordinates in // text inputs included in your html-file, and/or use offsets // document.Show.MouseX.value = tempX; // document.Show.MouseY.value = tempY; return true; } // End --> </script>
If you want to see mouse coordinates in text inputs, you should include the following code in your html-file:
<form name="Show"> X <input type="text" name="MouseX" value="0" size="4"> offset-x <input type="text" name="offsetX" value="0" size="2"><br> Y <input type="text" name="MouseY" value="0" size="4"> offset-y <input type="text" name="offsetY" value="0" size="2"><br> </form>
When defining map areas, one pixel more or less is usually not a major problem. Still, it can be a nuisance if you have to remember with each mouse coordinate that it should be offset by a certain x- and y-distance. It might take a little fiddling till you know the best offset values. But once you have them, simply enter them in the input fields named offset-x and offset-y - and forget it. The easiest way to do that is, arranging the map image starting somewhere in the upper left screen corner and moving the mouse to the point "0,0" of the image. Then the mouse coordinates appearing in the status bar and/or the text fields should also be "0,0". Usually they won't be at first - well, just type their values into the "offset" fields to the right. Upon the next mouse move, the coordinates displayed will be offset.
Another advantage you can use is: when an area is clicked, its border line appears on screen. Thus you can easily verify if the coordinates you coded into an area's attribute "coords=" are correct.