Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do we create an image map in HTML?
For creating clickable areas in an image, we use image map which is defined as <map> tag, with open and closing tags <map> </map>
The <area> tag defines an area inside an image-and nested inside a <map> tag. Following are the attributes −
Sr.No |
Attribute & Description |
|---|---|
1 |
alt The alternate text for the area |
2 |
coords The coordinates for the area |
3 |
download The target will download when the hyperlink is clicked |
4 |
shape The shape of the area |
5 |
target Where the URL will open |
Syntax
Following is the Syntax used for clickable area of images −
<map> <area> </map>
Example
Following example to create an image map in HTML −
<!DOCTYPE html>
<html>
<head>
<title>HTML map Tag</title>
</head>
<body>
<img src="https://www.tutorialspoint.com/static/images/logo.png?v2" alt="HTML Map" border="1" usemap="#html" />
<!-- Create Mappings -->
<map name="html">
<area shape="circle" coords="54,50,39" href="https://www.tutorialspoint.com/biology-tutorials.htm" alt="Team" target="_self" />
</map>
</body>
</html>
In the output of the program, the clickable part appears as circle with coordinates range 54,50,39, beyond the range the clickable part doesn’t appears. After clicking the clickable part, the another page logo.html will be opened, as shown:
By Using image map, we can perform different actions based on where we click on image. For creating image map, we need an image as well as some HTML code which describes the clickable area. The image can be inserted by using <img> tag, the difference when compared to other images is that, here we have to add usemap attribute.
Syntax
Usage of usemap attribute inside an <img> tag −
<img src="pic1.jpg" alt="flower" usemap="#flowermap">
In the above syntax, the usamap value starts with # tag followed by name , which is used to create a relationship between the image map and image.
Creating image map in HTML
We can create image map by simply adding <map> element inside the <body> tag of HTML. The <map> tag is used to create an image map, and it is linked to image by using name attribute, which is shown below -
<map name="flowermap">
Note − The name attribute must have same value as usemap attribute value which is used in <img> tag.
Adding clickable areas in HTML
By using <area> tag clickable area is created. For the clickable area we can define the shapes also, we can choose any of the following shapes -
rect
The rect shape defines the rectangular region on image. Following is the usage of rect attribute inside area tag −
<area shape="rect" coords="34,44,270,350" alt="Computer" href="logo.html">
poly
The poly shape defines a polygon region on an image. Following is the usage of poly attribute inside area tag −
<area shape="poly" coords="140,121,181,116,204,160,204,222,191, 270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
circle
The circle shape defines a circle region on an image. Following is the usage of circle attribute inside area tag −
<area shape="circle" coords="256, 300, 38" href="cup.htm">
default
The default is used to defines the entire region on an image.
We can also add coordinates to the shape which is place the clickable area onto the image.
Example
If we want to create a clickable rectangular area, following code has to be executed.
<!DOCTYPE html>
<html>
<body>
<h2>Using Image Maps in HTML</h2>
<p>Click on the logo to go to a new page and read more about the topic:</p>
<img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="Workplace" usemap="#workmap" width="400" height="150">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.tutorialspoint.com/index.htm">
</map>
</body>
</html>
1K+ Views
