HTML में छवि को क्लाइंट-साइड इमेज मैप के रूप में कैसे निर्दिष्ट करें?

usemap एट्रिब्यूट

usemap एट्रिब्यूट HTML में एक छवि को क्लाइंट-साइड इमेज मैप के रूप में निर्दिष्ट करने के लिए उपयोग किया जाता है। यह छवि को <map> तत्व से जोड़ता है जिसमें क्लिक करने योग्य क्षेत्र (<area>) परिभाषित होते हैं।

उदाहरण

निम्नलिखित कोड usemap एट्रिब्यूट का उपयोग करके इमेज मैप बनाता है:

<!DOCTYPE html>
<html>
<head>
    <title>HTML मैप टैग उदाहरण</title>
</head>
<body>
    <h2>इंटरैक्टिव इमेज मैप</h2>
    <img src="https://via.placeholder.com/400x300?text=Image+Map" 
         alt="HTML मैप" 
         usemap="#htmlmap"
         style="border: 2px solid #333; cursor: pointer;">
    
    <!-- मैप परिभाषा -->
    <map name="htmlmap">
        <!-- वृत्ताकार क्षेत्र -->
        <area shape="circle" 
              coords="200,150,80" 
              href="https://example.com/team" 
              alt="टीम" 
              target="_blank">
        
        <!-- आयताकार क्षेत्र -->
        <area shape="rect" 
              coords="50,50,150,120" 
              href="https://example.com/about" 
              alt="हमारे बारे में">
        
        <!-- बहुभुज क्षेत्र -->
        <area shape="poly" 
              coords="300,50, 350,120, 250,120" 
              href="https://example.com/contact" 
              alt="संपर्क">
    </map>
</body>
</html>

क्षेत्र आकार और निर्देशांक

निर्देशांक प्राप्त करने के उपकरण

• ब्राउज़र डेवलपर टूल्स (इंस्पेक्टर में छवि पर होवर)
• ऑनलाइन इमेज मैप जेनरेटर (image-map.net, आदि)
• GIMP/Photoshop में निर्देशांक पढ़ना

सुलभता नोट

प्रत्येक <area> के लिए सार्थक alt टेक्स्ट प्रदान करें ताकि स्क्रीन रीडर उपयोगकर्ता प्रत्येक क्षेत्र का उद्देश्य समझ सकें।

CSS के साथ हाइलाइट प्रभाव

<style>
    img[usemap] { cursor: pointer; }
    area:hover { outline: 2px solid red; } /* केवल कुछ ब्राउज़र्स में काम करता है */
</style>