How to use Image Map in HTML

In this article I will explain the Image Map in HTML.
  • 1797

Image maps are images with clickable areas (also called "hotspots") that usually link to another page.In order to create the image map firstly we need an image,so we create the image and save it as a gif or jpg or jpeg.Then we use the <map> tag of html and inside this tag we need to specify the clickable areas using area tag.Lets take an example of this,

Example

<html>

<head>

    <title></title>

</head>

<body>

    <img src="images/filled_star.png" width="225" height="151" border="0" alt="The red star represents the filled star"

        usemap="#star" />

    <map id="star" name="star_map">

        <area shape="rect" coords="90,80,120,151" href="star.htm" alt="empty_star" />

    </map>

</body>

</html>

 

Output
red_star.jpg

When I click the star it will open the another star.

yellow_star.jpg 

 

Ask Your Question 
 
Got a programming related question? You may want to post your question here
 
Programming Answers here

 

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.