How to implement a basic client-side image map in HTML

To implement basic client image mapping, you need to follow the following steps: 1. Use the <img src="/static/imghw/default1.png" data-src="floor-plan.png" class="lazy" alt="How to implement a basic client-side image map in HTML" > tag with the usemap attribute, whose value is "#map name", such as ; 2. Define the <map> element, whose name attribute corresponds to the usemap value (excluding #), such as

To implement a basic client-side image map in HTML, you use the <img src="/static/imghw/default1.png" data-src="floor-plan.png" class="lazy" alt="How to implement a basic client-side image map in HTML" > element in combination with the <map></map> and <area> elements. This allows you to define clickable regions (called "hotspots") on an image that can act as links to other pages or resources.

Here's how to do it step by step:

1. Use the <img src="/static/imghw/default1.png" data-src="floor-plan.png" class="lazy" alt="How to implement a basic client-side image map in HTML" > tag with the usemap attribute

Start by adding an image to your page and include the usemap attribute. The value of usemap should be a hash ( # ) followed by the name of the map you'll define.

 <img src="/static/imghw/default1.png"  data-src="floor-plan.png"  class="lazy" alt="Office Floor Plan" usemap="#officemap">

This tells the browser that this image uses an image map named officemap .

2. Define the <map> element

Below or near the image, define the <map> element with a name attribute that matches the value in usemap (without the # ).

 <map name="officemap">
  <!-- clickable areas go here -->
</map>

3. Add clickable regions with <area>

Inside the <map> element, use one or more <area> tags to define clickable shapes. Each <area> specifications:

• shape : the shape of the region ( rect , circle , poly , or default )
• coords : coordinates that define the region
• href : the link destination
• alt : alternative text (important for accessibility)

Example with multiple areas

 <map name="officemap">
  <!-- Rectangle: coordinates="left, top, right, bottom" -->
  <area shape="rect" coordinates="0,0,100,100" href="reception.html" alt="How to implement a basic client-side image map in HTML">

  <!-- Circle: coordinates="center_x, center_y, radius" -->
  <area shape="circle" coordinates="200,200,50" href="kitchen.html" alt="Kitchen">

  <!-- Polygon: list of x,y pairs -->
  <area shape="poly" coordinates="300,100,400,100,400,200,300,200" href="conference.html" alt="Conference Room">
</map>

Key Points to Remember

• Coordinate system : The top-left corner of the image is (0,0). Coordinates are in pixels.
• Image size matters : If the image is resized using CSS, the coords values ​​(which are based on the original image dimensions) may no longer align correctly. Use the actual displayed size or scale coordinates accordingly.
• Accessibility : Always include the alt attribute in each <area> to help screen readers.
• Default fallback : You can include a default area that covers the whole image:

   <area shape="default" href="home.html" alt="Home">

Full Working Example

 


  
  



  <img src="/static/imghw/default1.png"  data-src="floor-plan.png"  class="lazy" alt="Office Floor Plan" usemap="#officemap">

  

That's it — you now have a fully functional client-side image map. No JavaScript required, and it works across all modern browsers. Just make sure your coordinates match the image dimensions and test the links to ensure they work as expected.

The above is the detailed content of How to implement a basic client-side image map in HTML. For more information, please follow other related articles on the PHP Chinese website!