HTML tag <map>
The <map> tag in HTML is used in conjunction with the <img> tag to define clickable areas on an image. These clickable areas are referred to as image maps. By using the <map> tag, you can define multiple clickable areas on an image and link each area to a different URL.
Example:
Let's say we have an image of a world map, and we want to define clickable areas for different continents. Here's how you can do it:
<img src="worldmap.jpg" usemap="#continents">
<map name="continents">
<area shape="rect" coords="0,0,50,50" alt="North America" href="north_america.html">
<area shape="rect" coords="50,0,100,50" alt="South America" href="south_america.html">
<area shape="rect" coords="0,50,50,100" alt="Europe" href="europe.html">
<area shape="rect" coords="50,50,100,100" alt="Africa" href="africa.html">
</map>
In the above example, we have an image of a world map linked with an image tag. We have defined a <map> element with the name "continents". Inside the <map> element, we have defined four <area> elements, each representing a different continent. The "shape" attribute defines the shape of the clickable area (in this case, a rectangle), the "coords" attribute defines the coordinates of the clickable area, the "alt" attribute provides alternative text for the area, and the "href" attribute contains the URL to which the area is linked to.
Attributes of the <map> tag:
Attribute | Description |
---|---|
name | Defines a name for the map |