Demonstration of Client-side Imagemap

Stephen Wilson, Copyright, 1996

Server and Client Imagemaps

An imagemap is a web interface technique that retrieves different urls based on the position of the user's mouseclick in an image. In old style imagemaps, special cgi scripts were required at the server to process information about the link between a click and a designated url. New http 3.0 proposals allow "client-side" imagemaps in which all the link information is built into the html page. Not all browsers support these so alternate links should be provided.

MAP and USEMAP tags

The cient imagemap is implemented by using the IMG tag to present an image with a new option tag called USEMAP. The USEMAP tag names a MAP block of text elsewhere in the html document that links shapes in the image with specific urls. There may be several maps and images located in one html document. Alternately you could store map definitions in a totally separate document by specifying a full url. Be sure to specify ALT text as option in the IMG tag for users without images or client-side imagemap capability.

That section is enclosed by new <MAP> </MAP> tags. Each line of this section includes the following: 1.AREA tag followed by 2. kind of shape followed by 3. the coordinates of the image that define it followed by 4. the url to be fetched when the user clicks in that area. Shapes can be rectangles, circles, or polygons. Rectangles are identified by coordinates of topleft and bottom right corners. Circles are identified by coordinates of center and length of radius. Polygons are identified by the coordinates of each vertex. A default url for clicks not in any active areas can be indicated with the DEFAULT option.


textmap.htmlHere is the relevant code that creates that image. Note that the status bar at bottom of browser window indicates the URL as the mouse moves over sections of the image.


<IMG SRC="clientmap.gif" USEMAP="#map1"ALT="textmap.html">


<MAP NAME="map1">
<AREA SHAPE="DEFAULT" HREF="default.html">
<AREA SHAPE="CIRCLE" COORDS="12,12 12" HREF= "circle.html">
<AREA SHAPE="POLYGON" COORDS=" 90,24 110,2 150,24" HREF="triangle.html">
<AREA SHAPE="RECT" COORDS="30,30 90,50" HREF="rectangle.html">
</MAP>



- This page created by Stephen Wilson, Professor Conceptual Design, SFSU (http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu
- More information about the Conceptual Design program is available at (http://userwww.sfsu.edu/~infoarts)
- It is a resource used in Art511 Art&Telecommunications course (http://userwww.sfsu.edu/~infoarts/Tele/Tele95.index.html)
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books) by Stephen Wilson
- The url of this page is (http://userwww.sfsu.edu/~infoarts/Tele/wilson.clientmap.html)