Image Maps

HTML also allows us to create Image Maps. An Image map contains areas that work like links to other URLs. Let us see how a simple image map works.

Click on one of the Continents:
<img src="assets/images/webdevelopment_files/globe.png" width="400" height="400" alt="Globe" usemap ="#globemap"/>
 
<map id="globemap" name="globemap">
                <area shape="rect"
                        coords="116,84,221,121"
                        href ="http://en.wikipedia.org/wiki/North_America "
                        target="_blank" alt="NorthAmerica" />
                <area shape="poly"
                        coords="207,167,239,157,279,166,275,213,267,220,245,223,226,242,224,255,
                        211,266,200,245,203,221,175,202,191,174"
                        href ="http://en.wikipedia.org/wiki/South_America" target="_blank"
                        alt="southamerica" />
</map>

Click on one of the Continents:

The 'usemap' attribute of a normal image has to be set to the name of a map specified elsewhere in the HTML document. The shape attribute specifies the shape of the clickable area. It may be a rectangle, circle, or polygon. The coords attributes should contain the coordinates of the shape in pixels with respect to the image. The bottom left of the image is considered the origin of the coordinates (point 0,0). 'Alt' contains a textual caption, 'href contains the URL that this area in the map should link to and the value of the 'target' attribute makes the linked URL load into either the same window or a new window.

The rectangle is the easiest shape to map and its coordinates are easy to figure out. However, areas may not be adequately mapped by rectangular shapes. For example, our mapped area for North America only contains the central part of North America since only so much is possible with a rectangle. However, the area map of South America uses a polygon. This covers the area a lot better - the coordinates, however, are quite complex. Image mapping tools are used to generate the coordinates of many-sided polygons automatically. Image maps were very popular a few years ago but faster and more attractive navigation tools have gained a foothold in contemporary website design. However, image maps are still used extensively in geography and weather related domains and in sites where it makes sense to have clickable maps or images.