HTML - <area> Tag

Quiz

The HTML <area> tag is used to define a clickable regions within the image map. An image map allows different areas of a single image to be linked to different destinations or actions, providing an interactive experience. It is nested within the <map> element and the <image> element references the map using the usemap attribute.

The <area> tag supports attributes such as shape, coords, and target to define the clickable area, specify its geometry and controls where to open the link.

Syntax

Following is the syntax of HTML <area> tag −.

<area shape="" coords="" href="">

Attributes

HTML area tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
alt	text	Specifies an alternate text for the area.
coords	coordinates	Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps.
download	filename	Specifies that the target gets downloaded when hyperlink is clicked by user.
href	URL	Specifies the URL of a page or the name of the anchor that the link goes to.
hreflang	language_code	Specifies the language of the target URL.
media	media query	Specifies media/device the target URL is optimized for.
nohref	true/false	Excludes an area from the image map
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Specifies relationship between the current document and the target URL
shape	rect rectangle circ circle poly polygon	Specifies the shape of the image map
target	_blank _parent _self _top	Where to open the target URL.
type	mime_type	Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL.

Example : Applying on Image

In the following example, we will mark poly, rect, and circle area on the image using area tag. Where the shapes poly, rect, and circle will be clickable and will be redirected to the tutorials.

<!DOCTYPE html>
<html>
<head>
   <title>HTML area Tag</title>
</head>
<body>
   <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>   
   <map name = "tutorials">
      <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
      href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank">
      
      <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
      href = "/html/index.htm" target = "_blank">
      
      <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank">
   </map>
</body>
</html>

Example : Using for Zoomin

Consider the following example, where we are going to map the image with rect when you hover on the invisible rect the image will zoom in and if your cursor moveout of that rect the image will be go back to it's normal form.

<!DOCTYPE html>
<html>
<head>
    <style>
        #myImage {
            width: 500px;
            height: 300px;
            transition: transform 0.25s ease;
        }
        #myImage.zoomed {
            transform: scale(2);
        }
    </style>
    <script>
        function zoomIn() {
            document.getElementById('myImage').classList.add('zoomed');
        }
        function zoomOut() {
            document.getElementById('myImage').classList.remove('zoomed');
        }
    </script>
</head>
<body>
    <img id="myImage" src="/html/images/html-mini-logo.jpg" usemap="#image-map">
    <map name="image-map">
        <area target="" alt="Zoom Area" title="Zoom Area"
              href="#" coords="34,44,270,350" shape="rect" 
              onmouseover="zoomIn()" onmouseout="zoomOut()">
    </map>
</body>
</html>

Supported Browsers

Tag
area	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page