Inquiry.com - answers for IT professionals

Ask the Web Pro 10-Minute Solutions

Create Clickable Image Hotspots
By Charles C. Caison

You've probably visited a well-designed Web site and clicked images on the page to navigate to your destination. Some of these images allow you to jump to different pages depending upon where on the image you click. This image map feature is built into HTML, is easy to implement, and adds a nice touch to your pages.

The key to creating image maps is the HTML <MAP> tag. The <MAP> tag takes a single attribute, called "Name" and uses a series of <AREA> tags to define the locations of the clickable hotspots. The hotspots can be of various shapes, including rectangles, circles, and polygons of just about any shape. Each <SHAPE> tag takes three attributes: "SHAPE", "COORDS", and "HREF". "SHAPE" can have a value of "rect", "polygon", or "circle". "COORDS" defines the coordinates of the hotspot. The number of coordinate points depends on the value of the "SHAPE" attribute. The coordinates for the various shapes will be as follows:

rect - Always four coordinate points. The first two coordinates define the X/Y coordinates of the rectangle's upper left corner. The last two coordinates define the X/Y coordinates of the rectangle's lower right corner.

polygon - Always an even number of points. Each set of points defines a corner on the polygon. For example, if you have six coordinate points, you have three sets of coordinate points, which make up three corners, or a triangle. The first two points define a corner, the next two points define a second corner, and the last two points define the third corner. If you have eight coordinate points, the hotspot will be a rectangle. If you have 10 coordinate points, the hotspot will be a pentagon, and so on.

circle - Always three coordinate points. The first two coordinate points define the X/Y coordinates of the center of the circle. The third coordinate defines the distance from the center of the circle to the periphery.

The "HREF" tag defines the location that the user will jump to when the hotspot is clicked.

After using the <AREA> tags to define the hotspots, you may want to add a final <AREA> tag that defines a rectangle whose first two coordinates are 0,0 and the last two coordinates are equal to the size of the image. The all-encompassing hotspot will be the default destination that the user will jump to if the user clicks on an area other than one of the hotspots.

Finally, you must link the image to the <MAP> and <AREA> tags using the USEMAP attribute of the <IMG> tag. The USEMAP attribute will take the name of the <MAP> to use, which means that you can have more than one on a page. The name must be prefaced by a pound (#) sign. The name on the <MAP> tag does not use it.

Defining an image map is easy. Perhaps the most challenging part is determining the coordinates of the hotspot that you want to add. A good tool that makes it easier is Splash! Image Mapper (http://www.gosplash.com). It enables you to load the image and draw the hotspots. The appropriate <MAP> and <AREA> tags (with correct parameter values) will be automatically generated for you.

<HTML>
<HEAD>
<TITLE>Image map Page</TITLE>

</HEAD>
<BODY>

<IMG BORDER=0 USEMAP="#Map1" id=imgMapThis src="images/Beach1.gif" >

<MAP Name="Map1">
	<AREA SHAPE="rect" COORDS="224,134, 272, 150"
HREF="IMAGE_MAP_DESTINATION1.HTM">
	<AREA SHAPE="polygon" COORDS="162,154,171,165,167,175,31,177,16,156"
HREF="IMAGE_MAP_DESTINATION2.HTM">
	<AREA SHAPE="circle" COORDS="318,197,38" HREF="IMAGE_MAP_DESTINATION3.HTM">
	<AREA SHAPE="rect" COORDS="0,0,600,600" HREF="IMAGE_MAP_DESTINATION4.HTM">
</MAP>

</BODY>
</HTML>

Other 10-Minute Solutions