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
HTML Mapping Image
The HTML mapping image is a client-side image-map with clickable areas which acts as hyperlinks in an HTML document. To create the relationship between the map and img HTML element the name attribute of map element is associated with the img usermap attribute.
Syntax
Following is the syntax −
<img src=”” alt=”’ usemap=”#name_value”> <map name=”name_value”> <area shape=”” coords=”” href=”” alt=”’> <area shape=”” coords=”” href=”” alt=”’> </map>
Let us see an example of HTML mapping image−
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>HTML Mapping Image</h1>
<img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Learn Hadoop" usemap="#hadoopImg">
<map name="hadoopImg">
<area shape="rect" coords="0,0,400,100" alt="Hadoop Logo" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100">
</map>
<p>Click on the above logo</p>
</body>
</html>Output
Click on the logo part (elephant) of Hadoop in the image to observe how HTML mapping image works−
Updated on: 27-Sep-2019
666 Views
Advertisements