HTML मैपिंग इमेज एक क्लाइंट-साइड इमेज-मैप है जिसमें क्लिक करने योग्य क्षेत्र होते हैं जो HTML दस्तावेज़ में हाइपरलिंक के रूप में कार्य करता है। मानचित्र . के बीच संबंध बनाने के लिए और img HTML तत्व मानचित्र . का नाम विशेषता है एलिमेंट img यूजरमैप एट्रिब्यूट से जुड़ा है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
<img src=”” alt=”’ usemap=”#name_value”> <map name=”name_value”> <area shape=”” coords=”” href=”” alt=”’> <area shape=”” coords=”” href=”” alt=”’> </map>
आइए HTML मैपिंग इमेज का एक उदाहरण देखें-
उदाहरण
<!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> आउटपुट
HTML मैपिंग इमेज कैसे काम करती है, यह देखने के लिए छवि में Hadoop के लोगो भाग (हाथी) पर क्लिक करें-
