Simple Client Side Image Map

Client Side Image Map Example

Image maps create areas (rectangular areas being the most accepted) which can be linked to other pages or sites.

The use of the MAP and AREA tags define the areas in the image. You add usemap="#areaname" parameter to your IMG tag to apply an image map to it. Image map format is described below.

You can create an image map by hand by counting pixels, or use one of the many tools available on the net to create the maps.

Mapedit, from Boutell is a WYSIWYG editor for client-side imagemaps. Get the evaluation version of Mapedit here. This tool will update the IMG tag and add the appropriate MAP and AREA tags in your HTML code automatically.
Another map editor, which is freeware, is MapMaker 32 from Martin E. Haring.
Get a copy at: MapMaker32 version 2.0b
This program creates the MAP tags for your image, which you paste into your HTML.

IMAGE MAP EXAMPLE

Place the cursor over a color and click the mouse to select which color to go to.

The image above is 200x100 pixels.
The hot spots are defined by a MAP tag, which defines each of the active areas in the image. The MAP format is:
<map name="area_name">
<area shape="rect" coords="123,8,171,57" href="blue.htm"> This is an example area tag
more area tags
<area shape="default" nohref>
</map>

The coordinates of the hot spots are specified for each area, and can overlap. The one which appears first in the map definition takes precedence.
The area tag format is:
<AREA SHAPE="shape" COORDS="x,y,..." HREF="reference"> or
<AREA SHAPE="shape" COORDS="x,y,..." NOHREF>
SHAPE describes an area in the image and can be circle, rect (for rectangle), polygon (for triangles or other odd shaped areas), or default
REFERENCE is the URL of the page to go to when that area is picked (noref says don't go anywhere) x,y are the coordinate pairs for the corners of the areas (for the circle it is x, y, amd the radius of the circle (all in pixels)

The upper left corner of this area is 0,0 and the lower right is 199,99.
(x is the horizontal dimension (0 at the left to 199) and y is the vertical (0 at the top to 99).)

The rectangle has its upper left corner at 128,8 and the lower right corner at 171,57.
The triangle is a polygon that has its start at the lower left (9,44), goes to the top (at 44,9), goes to the lower right (at 79,44), and back to the lower left (at 9,44).
The circle has its center at 94,73 and has a radius of 25 pixels.

An href parameter tells where the user will be taken when the left mouse button is pressed.
If some of the figure does not have an area defined, then the "default" shape will tell where the user will be taken when the mouse is clicked over that area (in this example, you won't go anywhere because the value is set to nohref, which tells the browser to ignore mouse clicks over an area.)
The HTML (created by Mapedit) to map the image above is:
<map name="area">
<area shape="rect" coords="123,8,171,57" href="blue.htm">
<area shape="circle" coords="94,73,25" href="yellow.htm">
<area shape="polygon" coords="9,44,44,9,79,44,9,44" href="red.htm">
<area shape="default" nohref>
</map>

Here is the image tag for the image shown above has a pointer to the image map in the usemap parameter (usemap="#area"):

<IMG SRC="cube.gif" WIDTH="70" HEIGHT="70" BORDER="0" ALT="Map to color pages" usemap="#area" ALIGN=top>

NOTE: If you came here from the Web Tutorial, a new browser window was be opened for viewing this page. To return, you can just select the other browser (from the task bar in Windows 95 or click your mouse somewhere on its window). You can also close (or File, Exit) from this window when done.

Copyright © 1998 Jim Hanson Last update: Jan. 7, 1998
This Page made with Ray Bradbury's

This page hosted by Get your own Free Home