Skip to content
Related Articles

Related Articles

How to create an area inside an image-map using HTML5 ?
  • Last Updated : 14 Oct, 2020

The approach of this article is to create an area inside an image-map by using a <area> tag in a HTML Document. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag. It has no closing tag and hence it is an empty tag for HTML but incase of XHTML you need to close that properly. HTML5 has some new attributes.

Syntax:

<area> Contents </area> 

Example:  




<!DOCTYPE html>
<html>
  
<body style="text-align: center">
    <h2 style="color: green;">
        GeeksForGeeks
    </h2>
    <h2>
        How to create an area inside
        an image-map using HTML5?
    </h2>
    <img src=
        alt="" width="300" height="119" 
        class="aligncenter size-medium 
        wp-image-910965" usemap="#shapemap" />
  
    <map name="shapemap">
  
        <!-- Area tag contained image. -->
        <area shape="poly" 
            coords="59, 31, 28, 83, 91, 83"
            href=
            alt="Triangle">
  
        <area shape="circle" 
            coords="155, 56, 26"
            href=
            alt="Circle">
  
        <area shape="rect" 
            coords="224, 30, 276, 82"
            href=
            alt="Square">
    </map>
</body>
  
</html>

Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :