The HTML <map> tag is used to define an image map. An image map is a graphical image that is divided into regions or hotspots, each of which is associated with a different hyperlink. When a user clicks on a hotspot, they are taken to the corresponding hyperlink.
The <map> tag is used in conjunction with the <img> tag, which is used to display the graphical image. The <map> tag is used to define the hotspots on the image, and the <area> tag is used to define each individual hotspot.
The <map> tag has two required attributes:
name: Specifies a name for the image map.id: Specifies a unique ID for the image map.The <map> tag can also have the following optional attributes:
classstyletitleThe <area> tag is used to define each individual hotspot on the image map. The <area> tag has the following required attributes:
shape: Specifies the shape of the hotspot. The possible values are "rect" (rectangle), "circle", and "poly" (polygon).coords: Specifies the coordinates of the hotspot. The format of the coordinates depends on the shape of the hotspot.href: Specifies the URL of the hyperlink that the hotspot is associated with.The <area> tag can also have the following optional attributes:
alt: Specifies alternative text for the hotspot.target: Specifies the target window or frame for the hyperlink.classstyletitleHere is an example of an image map:
<img src="example.jpg" alt="Example Image" usemap="#example-map">
<map name="example-map" id="example-map">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="Hotspot 1">
<area shape="circle" coords="150,150,50" href="page2.html" alt="Hotspot 2">
<area shape="poly" coords="200,200,250,250,200,300" href="page3.html" alt="Hotspot 3">
</map>
In this example, the <img> tag is used to display the image, and the <map> tag is used to define the image map. The <area> tags are used to define the hotspots on the image map.
Here is an example of an image map with a target window:
<img src="example.jpg" alt="Example Image" usemap="#example-map">
<map name="example-map" id="example-map">
<area shape="rect" coords="0,0,100,100" href="page1.html" target="_blank" alt="Hotspot 1">
<area shape="circle" coords="150,150,50" href="page2.html" target="_blank" alt="Hotspot 2">
<area shape="poly" coords="200,200,250,250,200,300" href="page3.html" target="_blank" alt="Hotspot 3">
</map>
In this example, the <area> tags have a target attribute that specifies the target window or frame for the hyperlink.