top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

What is image map in HTML5?

+1 vote
469 views
What is image map in HTML5?
posted Feb 7, 2018 by Santosh Saibol

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

2 Answers

0 votes

An image-map is an image with clickable areas. The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.

Example

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

In the above example if you click the respectable area then you may reach to the different html files...

Credit: w3schools

answer Feb 8, 2018 by Salil Agrawal
0 votes

Hello..
An image-map is an image with clickable areas.

syntax:-

 <map name="workmap">
      <area shape="Shape Name" coords="Write Ordinates"  href="Pass Image path or image on which you want to make image-map">
</map>

Example:-

 <map>
      <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
    </map>
answer Feb 21, 2020 by Siddhi Patel
...