The usemap feature in HTML is used for mapping images or the Image Map, which allows you to connect different areas of a single image to different links. This feature is specifically useful when you want to provide multiple links to a large image, such as in images used for navigation; you can use this feature to link to different parts of the world.
To begin, you first need to define an image and a map. The image will include the usemap attribute, and the map will include the defined areas that you specify. Each area can be customized with attributes such as shape and coords.
When using the usemap feature, you must ensure that the value in the <img> tag is correctly defined for the usemap feature that points to a <map> with an id.
Proper use of usemap not only enhances the user experience but also significantly increases the engagement of users who can interact with more dynamic designs. Further explanations and examples will be provided in this topic.
<img src="example.jpg" alt="Example Map" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Area 1" title="Area 1" href="http://example1.com" shape="rect" coords="34,44,270,350">
<area target="_blank" alt="Area 2" title="Area 2" href="http://example2.com" shape="circle" coords="337,300,44">
<area target="_blank" alt="Area 3" title="Area 3" href="http://example3.com" shape="poly" coords="120,44,220,140,245,80">
</map>
Description of the code
<img src="example.jpg" alt="Example Map" usemap="#image-map">
This line defines an image called example.jpg that uses the usemap feature with the value #image-map. This feature connects the image to the maps detailed further.
<map name="image-map">
This line creates a map named image-map, which will be associated with areas defined in the image.
<area target="_blank" alt="Area 1" title="Area 1" href="http://example1.com" shape="rect" coords="34,44,270,350">
Here, a rectangular area is defined, linking through the click to http://example1.com. The area's dimensions are also defined using the coords feature.
<area target="_blank" alt="Area 2" title="Area 2" href="http://example2.com" shape="circle" coords="337,300,44">
This line defines a circular area in the image, where clicking on it leads to http://example2.com.
<area target="_blank" alt="Area 3" title="Area 3" href="http://example3.com" shape="poly" coords="120,44,220,140,245,80">
In this section, a polygonal area is defined that links to http://example3.com. The coordinates of this area highlight multiple vertices.