HTML Tutorial
<map>
The <map>
tag defines a client-side image-map. It allows you to create clickable areas (hotspots) on an image.
<map>
<map>
<!-- Defines a map named "myMap" for the image "myImage.jpg" -->
<map name="myMap">
<!-- Creates a rectangular hotspot with coordinates (10,10) to (50,50) -->
<area shape="rect" coords="10,10,50,50" alt="Hotspot 1" href="page1.html">
<!-- Creates a circular hotspot with center (200,200) and radius 50 -->
<area shape="circle" coords="200,200,50" alt="Hotspot 2" href="page2.html">
</map>
<!-- The "usemap" attribute links the image to the map -->
<img src="myImage.jpg" usemap="#myMap">
Exploring the <map>
Tag
HTML Example:
<html>
<body>
<map name="map1">
<area shape="rect" coords="10,10,50,50" alt="Hotspot 1" href="page1.html">
</map>
<img src="image.png" usemap="#map1">
</body>
</html>
Result:
This code creates a rectangular hotspot on the image "image.png". When you click the area, it takes you to the page "page1.html".
alt
attribute to provide alternative text for the hotspots, improving accessibility.coords
attribute are precise to avoid unintended clickable areas.