Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create an Image Map in HTML
Clickable Areas in HTML
To create clickable areas within an image, we use an image map, which is defined using the <map> tag, with both opening and closing tags: <map> </map>. An image is a list that coordinates specific areas of an image, allowing different parts of the image to be hyperlinked to various destinations.
These maps enable the server-side image web browser to send information to the server about where the user clicks within an image. Client-side image maps do not require any special logic to be executed on the server, as they do not need any JavaScript. The actual image is enabled with the <l;img> tag, which must include the usemap attribute to specify the imagemap to be used for the image.
The <area> tag defines a specific area within an image and is nested inside a <map> tag. The following are the attributes ?
| Attribute | Description |
|---|---|
|
alt |
The alternate text for the area. |
|
coords |
The coordinates for the area. |
|
download |
The target will download when the hyperlink is clicked. |
|
shape |
The shape of the area. |
|
target |
Where the URL will open. |
Example
Here's an example of creating an image map in HTML. The code uses the <img> tag with the usemap attribute to specify a <map> tag, which defines a circular clickable area that links to a URL.
<!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 program's output, the clickable part appears as a circle with coordinates 54, 30, 39. Beyond this range, the clickable part does not appear. When clicked, it opens another page, logo.html.
By Using image map, we can perform different actions based on where we click on the image. To create an image map, we need an image and some HTML code to describe the clickable areas. The image is inserted using the <img> tag, but unlike other images, we must add the usemap attribute.
Creating "image map" in HTML
We can create an image map by simply adding the <map> element inside the <body> tag of HTML. The <map> tag is used to create an image map, and is linked to the image using the name attribute, as is shown below -
<map name="flowermap">
Note: The name attribute must have the same value as the usemap attribute used in the <img> tag.
Adding "clickable areas" in HTML
By using the <area> tag, a clickable area is created. We can also define the shapes for the clickable area, choosing from any of the following shapes.
The "rect" Shape
The rect shape defines a rectangular region on the image. Here is how to use the rect attribute inside the <area> tag:
<area shape="rect" coords="34,44,270,350" alt="Computer" href="logo.html">
Example
To create a clickable rectangular area, use the following code. This HTML code creates an image with a clickable rectangular area. Clicking the logo opens a new page with more information. The <img tag uses the usemap attribute to link to the <map> tag.
<!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>
The "poly" Shape
The poly shape defines a polygonal region on an image. Here is how to use the poly attribute inside the <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">
Example
This HTML code creates a webpage with a heading "Using Image Maps in HTML". It includes an image with a polygonal clickable area that redirects to a new page for more information.
<!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="poly" coords="34,44,270,44,270,150,34,150" alt="Computer" href="https://www.tutorialspoint.com/index.htm">
</map>
</body>
</html>
The "circle" Shape
The circle shape defines a circle region on an image. Here is how to use the circle attribute inside the <area> tag:
<area shape="circle" coords="256, 300, 38" href="cup.htm">
Example
This HTML code creates a webpage with a heading "Using Image Maps in HTML". It includes an image with a circular clickable area that redirects to a new page for more information.
<!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="circle" coords="200,75,50" alt="Computer" href="https://www.tutorialspoint.com/index.htm">
</map>
</body>
</html>
The "default" Shape
The default is used to define the entire region of an image. We can also add coordinates to the shape to place the clickable area onto the image.
2K+ Views
