HTML मैपिंग इमेज (इमेज मैप)

विवरण

HTML मैपिंग इमेज एक क्लाइंट-साइड इमेज-मैप है जिसमें क्लिक करने योग्य क्षेत्र होते हैं जो HTML दस्तावेज़ में हाइपरलिंक के रूप में कार्य करते हैं। map और img HTML तत्व के बीच संबंध बनाने के लिए map तत्व के name एट्रिब्यूट को img के usemap एट्रिब्यूट से जोड़ा जाता है।

सिंटैक्स

<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 मैपिंग इमेज</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>ऊपर दिए गए लोगो पर क्लिक करें</p> 
</body> </html>

आउटपुट

HTML मैपिंग इमेज (इमेज मैप)

इमेज में Hadoop के लोगो भाग (हाथी) पर क्लिक करें और देखें कि HTML मैपिंग इमेज कैसे काम करता है:

HTML मैपिंग इमेज (इमेज मैप)