An image map is a feature in HTML that allows specific areas of an image to be linked to different web pages or sections within a single web page. To create an image map, you need to use the <map>
element to define the clickable areas on the image and associate them with specific URLs.
Example:
<img src="worldmap.gif" alt="World map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="northamerica.html" alt="North America">
<area shape="rect" coords="100,0,200,100" href="southamerica.html" alt="South America">
<area shape="rect" coords="200,0,300,100" href="europe.html" alt="Europe">
<area shape="rect" coords="300,0,400,100" href="asia.html" alt="Asia">
<area shape="rect" coords="400,0,500,100" href="australia.html" alt="Australia">
<area shape="rect" coords="500,0,600,100" href="africa.html" alt="Africa">
</map>
In this example, the <img>
element displays a world map image, and the usemap
attribute specifies the name of the image map (#worldmap
).
The <map>
element contains a series of <area>
elements, each of which defines a clickable region on the image using coordinates and a shape (rect
for rectangular areas or circle
for circular areas). The href
attribute specifies the URL of the linked page, and the alt
attribute provides a text description of the link for accessibility purposes.
Image maps can be useful for creating interactive diagrams or providing navigation within an image-heavy website, but they can also be challenging to create and maintain, as they require precise positioning and sizing of clickable regions. It’s important to test your image maps on different devices and screen sizes to ensure that they work properly for all users.