HTML Tutorial

HTML Tag: <map>

Usage of <map>

The <map> tag defines a client-side image-map. It allows you to create clickable areas (hotspots) on an image.

Attributes of <map>

  • name: Specifies the name of the map.
  • id: Sets a unique ID for the map.

Examples with <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".

Additional Tips:

  • Use the alt attribute to provide alternative text for the hotspots, improving accessibility.
  • Ensure the coordinates within the coords attribute are precise to avoid unintended clickable areas.
  • Consider using CSS to style the hotspots, providing visual cues to users.