Introduction to Image Maps
In HTML, an Image Map allows you to define clickable areas inside an image. Instead of using one single link for the whole image, you can divide the image into multiple parts, and each part can link to a different URL. This is very useful for creating interactive diagrams, maps, or navigation menus.
The <map> Tag
The <map> tag is used to create an image map, which makes certain parts of an image clickable, like buttons or links. It works together with the <area> tag, which defines the clickable regions inside the image.
The name attribute in the <map> tag must exactly match the usemap attribute in the <img> tag. This link connects the image to its map, and without it, the clickable areas on the image won’t work. The image map will not function properly without this link.
Example
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="usa.html" alt="USA"/>
<area shape="circle" coords="477,300,100" href="france.html" alt="France"/>
<area shape="poly" coords="290,172,333,250,300,300" href="china.html" alt="China"/>
</map>
The <area>Tag
The <area> tag is used to define each clickable region within an image map. It specifies the shape, size, and link of that area, allowing users to click on different parts of the same image to navigate to different links.
- shape → Defines the shape of the clickable region. (rect, circle, poly)
- coords →Provides the coordinates that describe the area.
- href →
<href>is the link that the user will see when they click it. - alt → Alternate text for accessibility.
Types of Shapes in Image Maps
Rectangle (rect):
Used for square or rectangular areas. Here, coords = (x1, y1, x2, y2).
Circle (circle)
Used for circular regions. Here, coords = (center-x, center-y, radius).
Polygon (poly)
Used for irregular shapes with multiple points. Here, coords = (x1,y1, x2,y2, x3,y3 …).
Advantages of Image Maps
One major advantage of image maps is that they save space and make navigation creative. Instead of cluttering the page with buttons and links, you can embed all the navigation directly inside the image.
Accessibility Tips
For accessibility and modern design, always provide alternative text using the alt attribute. Also, make sure the clickable regions are accurate so that users can easily interact with the image.
Conclusion
HTML image maps are a simple but powerful way to create interactive images where users can click on specific parts of a picture. They are commonly used in diagrams, maps, product showcases, and educational websites to make content more engaging and user-friendly.