<area>

PURPOSE: To make a imagemap having different links from one image. Different areas of the imagemap are defined as different hyperlinks. This tag gives one of the three shapes, rectangle, circle or polygon and the coordinates for each section of links and the destination url when that section is clicked upon.

This is one of those tags that is different. There is NOT a </area> tag. It is all incorporated into the one tag. Note there is a space between the br and the /.

Below is a basic html document. The referenced html tag is in RED. All tags must have a start and a end tag. Most end tags have a / before the tags name, however there are a few that are done differently. The tags that end differently will be noted and highlighted. The order of the start and end tags is also very important to proper display of your page in a web browser.

<html>
<head>
<title>Imagemap</title>
</head>
<body>
<img src="image1.gif" usemap="#example1" border="0" />
<map name="example1">
<area shape="rect coords="30,30,59,59" href="http://www.somewhere.com" />
</map>

<img src="image2.gif" usemap="#example2" border="0" />
<map name="example2">
<area shape="circle" coords="30,30,59,59" href="http://www.somewhere.com" />
</map>

<img src="image3.gif" usemap="#example3" border="0" />
<map name="example3">
<area shape="polygon" coords="x1,y1, x2,y2, .., xn,yn" href="http://www.somewhere.com" />
</map>

</body>
</html>

© Copyright 2001,2002 Southern Twilight    All rights reserved.

Back To HTML Examples