HTML

Example of Creating Image Map in HTML

updated on Leave a Comment on Example of Creating Image Map in HTML

Programmingempire

This article describes about Creating Image Map in HTML. Basically, an image map allows to create clickable areas within an image.

Sometimes we want that different parts of an image represent certain actions. In other words, when we click on a specific part of an image some specific action occurs. Hence, the image has some clickable regions. The purpose of an image map is to create the clickable regions within an image.

In order to create the clickable regions on an image, we need to use the <map> element along with the image. Therefore, in the <img> tag, we specify the usemap attribute. Similarly, in the <map> tag, we need to specify the name attribute with the same value as that of the usemap value. The following example demonstrates it.

<html>
  <head>
    <title>
       Image Map Example
    </title>
  </head>
  <body>
    <img src="img1.jpg" alt="Sunset" usemap="#pmap"/>
    <map name="pmap">
      <area shape="rect" coords="20, 100, 90, 56" alt="programmingempire" href="https://www.programmingempire.com/"/>
      <area shape="circle" coords="300, 225, 50" alt="princites" href="https://princites.com/"/>
    </map>
  </body>
</html>

Within the map element we can specify the clickable areas. For this purpose, we use the <area> tag. The <area> tag has three important attributes – shape, coords, and href. The following list specifies the possible values of the shape attribute.

  • rect
  • circle
  • poly

In fact, the value of the coords attribute relates with the value of the shape attribute. When the shape is rect, the coords attribute takes four values separated by the comma. These four values represent the x, any coordinates of the top-left, and bottom-right corners of the rectangle respectively. When the shape is circle, the coords attribute has three values representing the x, and y coordinates of the center, and the length of radius respectively.

In order to create the polygon region, the shape attribute should be set to the value poly. Also. the coords attribute should specify any number of pairs of x, and y coordinates representing the coordinates of different points of the polygon.

Output

Example of Creating Image Map in HTML with rectangle and circle areas
Example of Creating Image Map in HTML with rectangle and circle areas

Further Reading

HTML Practice Exercise

Example of Column Properties in CSS

CSS Box Model

Examples of Outline Properties in CSS

Styling Links and Lists

Princites

You may also like...
Bootstrap, CSS, HTML, JavaScript

Frequently Asked Questions on HTML and JavaScript
HTML

Examples of Z-index and Float Properties
HTML

HTML Examples for Beginners

Leave a Reply

Your email address will not be published. Required fields are marked *