Creating image map

      No Comments on Creating image map

Creating image map -using HTML <map> element.

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
The required name attribute of the <map> element is associated with the <img>’s usemap attribute and creates a relationship between the image and the map.

See the Pen Image map by scanfcode (@scanfcode) on CodePen.

Creating image map

HTML markup:

<div class="img-class">
  <img src="img-map.png"  alt="Countries" usemap="#planetmap">
  <div class="canada">Canada</div>
  <div class="europe">Europe</div>
  <div class="australia">Australia</div>
</div>
<map name="planetmap">
  <area shape="rect" coords="120,30,82,126" alt="Canada" href="canada.htm" title="Canada">
  <area shape="rect" coords="700,60,80,80" alt="Europe" href="Europe.htm" title="Europe">
  <area shape="rect" coords="1200,500,80,80" alt="Australia" href="australia.htm" title="Australia">
</map>

CSS:

.img-class
{
  position:relative;
}
.canada
{
  position:absolute;
  top:40px;
  left:100px;
}
.europe
{
  position:absolute;
  top:60px;
  left:410px; 
}
.australia
{
  position:absolute;
  top:260px;
  left:560px;
}

Summary
Creating image map
Article Name
Creating image map
Description
Creating image map -using HTML <map> element. The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas. The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

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