Open In App

How to create an area inside an image-map using HTML5 ?

Last Updated : 08 Jun, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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:  

html




<!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:

Before click on specific clickable area:

After click on specific clickable area: 

Supported Browsers:

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


Similar Reads

What is image map &amp; how to map the image in HTML ?
In this article, we will discuss an image map in HTML, along with understanding its implementation through the examples. An Image Map refers to the clickable image having a clickable area that can be used to navigate to the various link to other web pages or the specific section of the same web page. The &lt;map&gt; tag can be used to define the im
2 min read
How to create a client-side image-map in HTML5 ?
In this article, we will create a client-side image map by using an &lt;img&gt; tag. The &lt;img&gt; tag is used to add images on a webpage. This tag is an empty tag which means it can contain only a list of attributes and it has no closing tag. Syntax: &lt;img src="url" alt="some_text" usemap="#mapname"&gt; Example: &lt;!DOCTYPE html&gt; &lt;html
1 min read
How to specify the hyperlink target for the area of an image in HTML5 ?
The href attribute is used to specify the hyperlink target for the area in HTML5. The area tag is not a hyperlink in itself. The &lt;a&gt; tag should always have an opening as well as a closing tag. The coords attribute is obsolete on an element. Instead, always use the area tag for the image map where coords attribute can be used within the area t
1 min read
Create a Map with Google Map Api using React-Native
In this project, we'll explore how to integrate Google Maps into a React Native application. We'll create a dynamic map that allows users to view their current location and interact with markers on the map. This project aims to provide a practical guide for developers looking to incorporate maps into their mobile applications using React Native. Ou
3 min read
How to create a multiline input control text area in HTML5 ?
The HTML &lt;textarea&gt; tag is used to specify a multiline input control text area in HTML5. The &lt;cols&gt; and &lt;rows&gt; attributes specify size of a textarea. Syntax &lt;textarea rows="" cols=""&gt; Contents... &lt;/textarea&gt; The &lt;textarea&gt; tag contains 5 attributes that are listed below: cols: It specifies width of textarea.rows:
1 min read
Image inside div has extra space below the image in CSS
Sometimes when you insert an image inside a div element, you might notice that there is extra space below the image. This can happen due to various reasons such as the image having a different aspect ratio than the div, or the div having padding or margin that affects the image placement. In this article, we will discuss different approaches to sol
5 min read
How to create an image acting as a submit button using HTML5 ?
In this article, we will learn how to create an image that acts as a submit button i.e. whenever we click on an image in the form, it will be automatically submitted to the server. The default type of &lt;input&gt; type attribute is text. Here, we use a simple approach to complete the task. Syntax &lt;input type = "image"&gt;Attribute Value: image:
2 min read
How to add Google map inside html page without using API key ?
There are two ways to add google maps inside HTML page: Using API key Without using API key To learn first case you can follow the article while to learn other one follow this article. To insert google map inside the HTML page, follow the steps: Go to the google maps and search your desired location. Now, you will see share option, click on it. Now
2 min read
How to specify an image as a server-side image-map in HTML ?
In image mapping, an image is specified with certain set of coordinates inside the image which act as hyperlink areas to different destinations. It is different from an image link since in image linking, an image can be used to serve a single link or destination whereas in a mapped image, different coordinates of the image can serve different links
1 min read
JavaScript Index inside map() Function
In JavaScript, the map() method handles array elements, which creates a new array with the help of results obtained from the calling function for each and every array element in an array. The index is used inside the map() method to state the position of each element in an array, but it doesn't change the original array. Syntax: array.map(function(
2 min read