HTML इमेज मैप्स

कोई image map एक अकेली picture को interactive navigation के एक टुकड़े में बदल देता है, जहाँ एक ही image के अलग-अलग regions अलग-अलग destinations से link होते हैं। एक picture को कई अलग linked images में काटने की बजाय, आप एक ही image रखते हैं और उसके ऊपर invisible clickable zones डिफाइन करते हैं। यही idea clickable diagrams, interactive maps, या किसी अकेली banner image के पीछे भी होता है जहाँ हर icon कहीं अलग link करता है, वह भी artwork को बिना अलग किए।

In this page:

इमेज मैप क्या है?
<img> पर usemap एट्रिब्यूट
<area> से क्लिकेबल एरिया डिफाइन करना
shape और coords एट्रिब्यूट्स
इमेज मैप्स के लिए एक्सेसिबिलिटी

Syntax

markup

<img src="image-url" usemap="#mapname" alt="Description">
<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="url" alt="Description">
</map>

इमेज मैप क्या है?

एक image map किसी एक image को कई selectable regions वाली clickable surface में बदल देता है, जिनमें हर region अलग destination से लिंक होता है, इसके बजाय कि एक image को कई अलग linked images में बाँटा जाए।

Note:

image maps असली image-based navigation के लिए सबसे अच्छे हैं, जैसे कोई diagram या असली map, न कि किसी साधारण menu के विकल्प के रूप में।
Accepted attributes:
img usemap — #mapname
map name — mapname
area shape / coords / href / alt

Warning: Image map regions किसी responsive image के साथ अपने आप resize नहीं होते, इसलिए किसी scaled image में hotspots picture के गलत हिस्सों की ओर pointing कर सकते हैं।

उदाहरण: What Is an Image Map?

markup

<img src="map.jpg" usemap="#worldmap" alt="World map">
<map name="worldmap">
  <area shape="rect" coords="0,0,100,100" href="asia.html" alt="Asia">
</map>

<img> पर usemap एट्रिब्यूट

usemap attribute किसी <img> element को एक <map> element से जोड़ता है, map के नाम को hash symbol के साथ reference करके, ठीक उसी तरह जैसे किसी in-page anchor से लिंक किया जाता है।

Note:

हर map का नाम छोटा और unique रखें ताकि यह page पर कहीं और मौजूद किसी दूसरे map से कभी टकराए नहीं।
Accepted values:
usemap — hash-name reference, e.g. #planetmap
Must match a map element name

Warning: usemap value में शुरुआती '#' भूल जाने से connection चुपचाप टूट जाता है, और browser image को बिना किसी clickable areas के दिखाता है।

उदाहरण: The usemap Attribute on <img>

markup

<img src="diagram.jpg" usemap="#parts" alt="Diagram">
<map name="parts"></map>

<area> से क्लिकेबल एरिया डिफाइन करना

<map> के अंदर हर <area> element एक clickable region define करता है, जिसका अपना href, alt text, और shape होता है। एक ही image पर कई hotspots बनाने के लिए एक map के अंदर कई <area> elements रखे जा सकते हैं।

Note:

area elements को उसी क्रम में लिस्ट करें जिस क्रम में वे visually दिखते हैं, जो keyboard navigation के लिए tab order को भी प्रभावित करता है।
Accepted attributes:
shape — rect | circle | poly | default
coords — depends on shape
href — link URL
alt — required text alternative
target — _self | _blank | _parent | _top

Warning: overlapping area coordinates की वजह से एक region unreachable हो सकता है, क्योंकि browser सिर्फ पहला matching area register करता है।

उदाहरण: Defining Clickable Areas with <area>

markup

<map name="parts">
  <area shape="rect" coords="0,0,50,50" href="engine.html" alt="Engine">
  <area shape="rect" coords="51,0,100,50" href="wheel.html" alt="Wheel">
</map>

shape और coords एट्रिब्यूट्स

shape attribute किसी clickable area की geometry (rect, circle, या poly) define करता है, जबकि coords वे numeric coordinates देता है जो उस shape को image के top-left corner के relative position और size देते हैं।

Note:

अपनी coords values लिखने से पहले सटीक pixel coordinates पढ़ने के लिए किसी image editor या browser devtools का इस्तेमाल करें।
Accepted values:
rect — coords=x1,y1,x2,y2
circle — coords=x,y,radius
poly — coords=x1,y1,x2,y2,... pairs
default — whole image; no coords

Warning: circle shape को ठीक तीन coords values चाहिए होते हैं (center-x, center-y, radius); गलत count देने से वह area चुपचाप टूट जाता है।

उदाहरण: The shape and coords Attributes

markup

<map name="shapes">
  <area shape="circle" coords="50,50,30" href="center.html" alt="Center">
</map>

इमेज मैप्स के लिए एक्सेसिबिलिटी

हर <area> element को किसी साधारण link की तरह meaningful alt text चाहिए, ताकि screen reader users हर region का destination समझ सकें, भले ही shapes खुद assistive technology के लिए invisible हों।

Note: हर area के लिए alt text वैसे ही लिखें जैसे आप कहीं और link text लिखते हैं: shape की बजाय destination describe करें।

Warning: बिना alt text वाला <area> एक unlabeled link के रूप में announce होता है, जिससे image map का वह हिस्सा screen reader visitors के लिए unusable हो जाता है।

उदाहरण: Accessibility for Image Maps

markup

<map name="parts">
  <area shape="rect" coords="0,0,50,50" href="engine.html" alt="Go to Engine details">
</map>

Live Example

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Datalist Next Lesson → HTML Browser DevTools

HTML इमेज मैप्स

इमेज मैप क्या है?

<img> पर usemap एट्रिब्यूट

<area> से क्लिकेबल एरिया डिफाइन करना

shape और coords एट्रिब्यूट्स

इमेज मैप्स के लिए एक्सेसिबिलिटी

Chapter Quiz — Complete all 20 topics to unlock

Login to run this code