Image Map Lesson

There are other shapes you can map your images by. Note to Webtvers: These shapes won't make much difference in your image maps due to the the square webtv highlighter. A Circle would require a center point coordinate, plus a radius of the circle. Below in the sample, the radius is "35". This radius size can be determind by trial and error. A Polygram requires you to get the coordinates of all points that you wish to include in your "hot spot" shape. In the triangle below, three corner coordinates were mapped.

  • circle - Defines a circle. Coordinates required: Center point & radius - (x, y) & radius
  • rect - Defines a rectangle or square. Coordinates required: Upper left corner, lower right corner - (x,y)(x,y)
  • poly - Defines a polygon. Coordinates required: All points up to 100 points - (x,y)(x,y)(x,y)

A sample image map of different shapes mapped out. Each shape is linked to a different type medium, try them. The code below is for this sample map. Note the different shapes determined in the code.

<img src="sample3.jpg" border=0 height=111 width=300 usemap="#mymap2">
<map name="mymap2">
<!-- sample circle -->
<area shape=circle coords="53,52,35" href="http://url_of_whatever">
<!-- sample rectangle -->
<area shape=rect coords="126,20,194,88" href="http://url_of_whatever">
<!-- sample polygon -->
<area shape=poly coords="253,20,220,89,285,88" href="http://url_of_whatever">
</map>