Image map

An image with hot spots lets the user click on the hot spots, to link to another page.
There are three important elements, which must be used to build an image with hot spots:

• img
• map
• area

The  img  tag must contain a  usemap  attribute, which must refer to the  name  of the  map  element.
The  map  must have a  name,  rather than an  id.
Within the  map  container element, there must be  area  elements.

Within an image, the dimensions are measured from the top left corner.
Dimensions are measured in pixels.
The x coordinate is across from left to right.
The y coordinate is DOWN from top to bottom.
You can specify any point in the image by its x and y coordinates.

Be careful that your hot spots do not overlap, and do not extend outside the image. This can produce unexpected results.

We will use dimensions to specify the hot spot areas.
There are three hot spot area shapes, which can be used for hot spots. The  shape  attribute can have one of these three values:

• rect - for a rectangle
• poly - for a polygon
• circle - for a circle

For a rectangle, you specify the x and y coordinates of the top left corner of the hot spot, followed by the x and y coordinates of the lower right corner of the hot spot. For example, to get a rectangular hot spot with
the upper left corner 100 pixels from the left edge and 10 pixels down from the top, and
the lower right corner 140 pixels from the left edge and 190 pixels down from the top, code:

  
          <area   shape="rect"  coords="100, 10, 140, 190" 
          

For a polygon, you specify the x and y coordinates of each vertex of the hot spot, in order around the polygon. For example, to get an isosceles triangle hot spot with vertices
100 pixels from the left edge and 10 pixels down from the top, and
60 pixels from the left edge and 190 pixels down from the top, and
140 pixels from the left edge and 190 pixels down from the top, code:

  
          <area   shape="poly"  coords="100, 10, 60, 190, 140, 190" 
          

For a circle, you specify the x and y coordinates of the center of the hot spot, and then the radius. For example, to get a circle hot spot with center
100 pixels from the left edge and 90 pixels down from the top, and
a radius of 60 pixels , code:

  
          <area   shape="circle"  coords="100, 90, 60" 
          

Let's look at all the elements and attributes needed to have an image map.

You need an  img  element, with its usual attributes and the map attribute:

• src
• height
• width
• alt
• map - with # and the name of the map element

You need a  map  container element.
The  map  element must have a  name  attribute.
Within the  map  container you need one or more  area  elements for the hot spots.

For each  area  element you need the attributes:

• shape - rect, poly, or circle
• coords - coordinates, as appropriate for the shape
• href - the target page the browser will go to
• alt - used for a tool tip

This image has hot spots, that are mapped as links. There are also text links under the image.

How do you find the coordinates, so the hot spots are where you want them?
There are some techniques, using image processing programs. I find they are more trouble than they are worth.
I just guess, and modify it until it is right. When you move the mouse into a hot spot, it turns into a hand. Move the mouse around and watch when it turns into a hand.

Check your coordinates to make sure your hot spots do not overlap, or extend outside the image.