When a link is added to an image in Hypertext Markup Language (HTML), that link is added to the entire image. This can be a problem if the programmer wants to make a single image with several areas or buttons and each area is used for a different link. An HTML image map allows the programmer to specify certain areas where the link will go, allowing him or her to embed several links into one image. This is done by specifying a shape for the link and telling the HTML what coordinates are to be used for the link.
Images used for the Internet are measured in pixels. Knowing how many pixels are in the image is the first essential step to creating an image map. For example, a rectangular image is being used that has a height of 400 pixels and a width of 250 pixels. Next, the programmer has to know how to accurately measure the shape in coordinates for the HTML image map to work properly.
The top left corner is called 0,0 when using an HTML image map. The bottom right corner in this case would be 250,400. The measurements are made with the width first, and then the height. An easy way to think of it is that the first measurement is telling the HTML how far to the right to go from the left edge and the second is how telling it how many pixels down to go. If the programmer wants a point on the map to be 10 pixels from the left edge and 50 pixels down, the coordinates would be 10,50.
There are three different shapes the programmer can invoke for an HTML image map: rect, circle and polygon. "Rect" stands for rectangle, and the programmer has to first type the coordinates for the top left corner and then the bottom right. A circle is specified by typing the coordinates where the circle begins, and then radius of the circle. A polygon is created by typing in all five coordinates, from the top to the right.
HTML image map coding goes like this:
<map name="test">
<area href="url.html" shape=rect coords="10,50,20,60">
<area href="url.html" shape=circle coords="10,50,4">
<area href="url.html" shape=polygon coords="10,50,12,55,15,60,13,65,8,55">
Each HTML image map must have a name, and the "url.html" section is the link where that section of the image map will lead a user when he or she clicks on it. When the image is placed on the website with HTML, the programmer must write: usemap="test." This will tell the image what HTML image map to use.
