Imagemaps

by Htmlcenter   |   last updated February 6, 2004   |   Web Tutorials ·

Image maps allow users to access different documents by clicking different areas in an image. You can implement image maps in two ways: by storing image map information on a server or by including image map information in your document. These areas are commonly referred to as hotspots.

If you store image map information on a server, you need a script or other service on the server to process click information. In your document, you mark the image as a “server-side” image map by using the ISMAP attribute in the IMG tag and enclosing the image in an A tag, as in the following example:

<A HREF=”jump.map”>
<IMG SRC=”sample.gif” ISMAP></A>

In this example, the image map information is in the file name JUMP.MAP. When the user clicks on the picture SAMPLE.GIF, the server receives the coordinates of the click, and can pick the appropriate destination for the click by checking the information in JUMP.MAP.

If you include image map information in your document, Internet Explorer processes the click information and picks the appropriate destination for the click. In your document, you mark the image as a “client-side” image map by using the USEMAP= attribute in the IMG tag, and you add image map information by using the MAP and AREA tags, as in the following example:

<MAP NAME=”map1″>

<AREA SHAPE=”RECT” COORDS=”0, 0, 16, 16″ HREF=”sample1.htm”>

<AREA SHAPE=”RECT” COORDS=”16, 0, 16, 16″ NOHREF>

<AREA SHAPE=”RECT” COORDS=”0, 16, 16, 16″ HREF=”sample2.htm”>

<AREA SHAPE=”RECT” COORDS=”16, 16, 16, 16″ HREF=”sample3.htm”>

</MAP>

<IMG BORDER=0 SRC=”map1.gif” USEMAP=”#map1″>

In this example, the image map defines four equal rectangular areas. One area has no corresponding destination, but the other three map to the SAMPLE1.HTM, SAMPLE2.HTM, and SAMPLE3.HTM files, respectively.

The AREA tag permits other shapes, such as circles and polygons. If two or more shapes overlap, Internet Explorer uses the first shape defined in the MAP tag to determine the destination. Any number of AREA can specify the same destination. This is useful if you want to map a complex shape to a single destination. If a portion of the image is not within a given shape, clicking in that portion has no effect.