HTML Image Map

HTML Image Map क्या है?

HTML Image Map एक ऐसी तकनीक है, जिसके जरिए आप एक इमेज के विभिन्न हिस्सों को Clickable बनाकर अलग-अलग लिंक असाइन कर सकते हैं। Image Map का उपयोग तब किया जाता है जब एक इमेज में कई सेक्शन होते हैं और प्रत्येक सेक्शन को एक अलग लिंक या कार्य के साथ जोड़ना होता है।

उदाहरण के लिए, यदि आपके पास एक देश का नक्शा है, तो आप हर राज्य या शहर को Clickable बनाकर एक अलग लिंक दे सकते हैं।

HTML Image Map की Working

Image Map बनाने के लिए दो मुख्य तत्वों की आवश्यकता होती है:

<img> टैग: यह इमेज को प्रदर्शित करता है।
<map> टैग: यह इमेज के विभिन्न हिस्सों को Define करता है और उनके साथ लिंक जोड़ता है।

<map> टैग के अंदर, आप <area> टैग का उपयोग करके इमेज के Clickable क्षेत्रों को Define करते हैं।

HTML Image Map का Basic Syntax

<img src="image.jpg" alt="Example Image" usemap="#mapname">

<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="link1.html" alt="Area 1">
  <area shape="circle" coords="x,y,radius" href="link2.html" alt="Area 2">
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="link3.html" alt="Area 3">
</map>

`<area>` टैग के Attributes

shape:
यह बताता है कि इमेज के कौन से हिस्से को Clickable बनाना है।
- rect: Rectangle (आयताकार) क्षेत्र।
- circle: Circular (गोल) क्षेत्र।
- poly: Polygonal (बहुभुज) क्षेत्र।
coords:
- rect के लिए: “x1,y1,x2,y2” (ऊपरी-बाएं कोने और निचले-दाएं कोने के कोऑर्डिनेट्स)।
- circle के लिए: “x,y,radius” (केंद्र बिंदु और रेडियस)।
- poly के लिए: “x1,y1,x2,y2,x3,y3,…” (बहुभुज के कोऑर्डिनेट्स)।
href:
यह लिंक का URL निर्दिष्ट करता है, जहां उपयोगकर्ता को Redirect किया जाएगा।
alt:
क्षेत्र का वैकल्पिक टेक्स्ट प्रदान करता है।
target:
लिंक खोलने का तरीका निर्दिष्ट करता है (जैसे, नई टैब में)।

HTML Image Map का उदाहरण

Rectangle, Circle और Polygon का उपयोग:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Image Map</title>
</head>
<body>
  <h1>HTML Image Map Example</h1>
  <img src="world-map.jpg" alt="World Map" usemap="#worldmap" width="600">

  <map name="worldmap">
    <!-- Rectangle Area -->
    <area shape="rect" coords="34,44,270,350" href="https://example.com/region1" alt="Region 1">
    <!-- Circle Area -->
    <area shape="circle" coords="337,300,44" href="https://example.com/region2" alt="Region 2">
    <!-- Polygon Area -->
    <area shape="poly" coords="172,45,227,89,267,134,157,134" href="https://example.com/region3" alt="Region 3">
  </map>
</body>
</html>

आउटपुट:

Rectangle पर क्लिक करने से Region 1 की वेबसाइट खुलेगी।
Circle पर क्लिक करने से Region 2 की वेबसाइट खुलेगी।
Polygon पर क्लिक करने से Region 3 की वेबसाइट खुलेगी।

Coordinates कैसे प्राप्त करें?

Coordinates (x, y) इमेज पर पॉइंट्स को मापने के लिए उपयोग किए जाते हैं। इन पॉइंट्स को मैन्युअली निकालने में समय लग सकता है, लेकिन आप निम्न तरीकों से Coordinates प्राप्त कर सकते हैं:

Image Editing Tools:
- Photoshop, GIMP, या Paint जैसे टूल का उपयोग करके इमेज के पिक्सल कोऑर्डिनेट्स मापें।
Online Tools:
- Image Map Generator जैसे टूल का उपयोग करें।
Browser DevTools:
- ब्राउज़र के डेवलपर टूल का उपयोग करके पिक्सल को मापें।

Responsive Image Maps

यदि आपकी वेबसाइट Responsive है, तो Image Map को भी Responsive बनाने की आवश्यकता है।

CSS का उपयोग करके:

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

JavaScript का उपयोग करके:

Responsive Image Map Plugin का उपयोग करें।

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<script>
  $(document).ready(function() {
    $('img[usemap]').rwdImageMaps();
  });
</script>

Accessibility के लिए Best Practices

alt Attribute:
प्रत्येक <area> टैग में alt का उपयोग करें ताकि स्क्रीन रीडर उपयोगकर्ता क्षेत्र की जानकारी प्राप्त कर सकें।
Fallback Content:
यदि इमेज लोड न हो, तो एक टेक्स्ट लिंक प्रदान करें। <p><a href="https://example.com/region1">Region 1</a></p>
High-Contrast Images:
सुनिश्चित करें कि इमेज का कंट्रास्ट पर्याप्त है ताकि विभिन्न Clickable क्षेत्रों को आसानी से पहचाना जा सके।

निष्कर्ष

HTML Image Map एक शक्तिशाली तकनीक है, जो इमेज को Interactive और उपयोगी बनाती है। इस अध्याय में, आपने सीखा कि कैसे Image Map के माध्यम से इमेज के विभिन्न हिस्सों को लिंक किया जा सकता है। अगला अध्याय HTML Tables के बारे में होगा, जिसमें आप सीखेंगे कि डेटा को सारणीबद्ध तरीके से कैसे प्रस्तुत किया जाए।