Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to make image maps in HTML5 ?

  • Last Updated : 26 Sep, 2021

The HTML <map> tag is used to define image maps in HTML. The areas inside the image which are clickable are defined by using the <area> tag.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<map name="map-name">

Attribute value:

  • name: It is used to associate the map with the image in which it is used.

Note: The name attribute in the map must have same value as image’s usemap attribute.



 

Example: In this example, the highlighted area is the mapped area, clicking on it will lead to the website.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">    
</head>
<body>
    <img src=
        alt="gfgimage" usemap="#mapID">
   
    <map name="mapID">
        <area shape="rect" 
            coords="34, 44, 270, 350"
    </map>
</body>
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :