HTML - <map> Tag

Quiz

Introduction to <map> Tag

The HTML <map> tag is used to define a client side image map, that allows to create interactive areas on an image. These areas can be linked to different URLs making the image mpore interactive and functional. It is used in conjunction with the <area> tag, which defines the specific clickable region within the map.

The <map> element accepts the name attribute to uniquely identify the map, and this name is linked to the usemap attribute of an <img> element. The <area> tag within the <map> element specifies each hotspots shape, size and URL.

Syntax

Following is the syntax of HTML <map> tag −

<map name="">...</map>

Attributes

HTML map tag supports Global and Event attributes of HTML. And a specific attribute as well which is listed bellow.

Attribute	Value	Description
name	mapname	Defines a unique name for the map tag.

Example : Rectangle Hotspot

Lets look at the following example, where we are going to create a rectangular hotspot on the image that navigates to another page when clicked.

<!DOCTYPE html>
<html>
    <style>
        body{
            text-align:center;
            color:#8e44ad ;
            font-family:verdana;
        }
    </style>
   <body>
   <h2>HTML map Tag</h2>
<img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="LOGO" usemap="#logo">
<map name="logo">
  <area shape="rect" coords="34,44,270,350" href="https://www.tutorialspoint.com/html/html_map_tag.htm">
</map>
</body>
</html>

Example : Circular Hotspot

Consider the following example, where we are going to use the circular hotspot that navigates to another page when clicked.

<!DOCTYPE html>
<html>
    <style>
        body{
            text-align:center;
            color:#8e44ad ;
            font-family:verdana;
        }
    </style>
   <body>
   <h2>HTML map Tag</h2>
<img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="logo" usemap="#logo">
<map name="logo">
  <area shape="circle" coords="150,75,50" href="https://www.tutorialspoint.com/html/html_map_tag.htm">
</map>
</body>
</html>

Supported Browsers

Tag
map	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page