What is Image Map in HTML

What is Image Map in HTML and how do I create it.

1 Like

An image map in HTML is a graphical image that is divided into clickable areas or regions, each of which links to a different URL or performs a specific action when clicked.

Example of the HTML code for an image map:

<img src="image.jpg" usemap="#mymap">

<map name="mymap">
    <area shape="rect" coords="50,50,150,150" href="page1.html">
    <area shape="circle" coords="200,100,50" href="page2.html">
    <area shape="poly" coords="300,50,400,100,300,150" href="page3.html">
</map>
1 Like

An image map is an HTML feature that enables developers to create hyperlinks over different sections of an image, without having to break up the image. These shapes can come in a variety of sizes and enable developers to match links to visual elements on images, such as making a circular action button a clickable link.

An image map is created by adding the ’ usemap ’ attribute to an < img > tag, which specifies the ID of a < map > tag.

For example,

< img src=/images/map.gif alt=“Map” border=“0” usemap=“#map”/ >

< map name=“Map” >

    < area shape="circle" coords="150,150,45" href="document1.html" alt="document 1" target="_ blank"/ >
    < area shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" alt="document 2" href="document2.html" target="_ blank"/ >

< /map >