HTML Image Map का उपयोग एक ही image के अलग-अलग हिस्सों पर अलग-अलग links लगाने के लिए किया जाता है।
जब image के अलग areas पर click करने से अलग actions चाहिए होते हैं, तब Image Map सबसे सही solution होता है।
HTML Image Map क्या होता है
Image Map एक ऐसी technique है जिसमें एक image को multiple clickable regions में divide किया जाता है।
हर region अलग link या action perform कर सकता है।
Example use cases: Website banner
World map
Human body diagram
Product image with parts
HTML Image Map के लिए जरूरी Elements
HTML Image Map बनाने के लिए तीन चीज़ें जरूरी होती हैं:
<img> tag<map> tag<area> tag
Step 1: Image में usemap Attribute लगाना
सबसे पहले image को define किया जाता है और usemap attribute दिया जाता है।
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
ध्यान दें: usemap में # के साथ map का नाम लिखा जाता है।
Step 2: <map> Tag बनाना
<map> tag image के clickable areas को define करता है।
<map name="workmap">
</map>
name attribute और usemap का नाम same होना चाहिए।
Step 3: <area> Tag से Clickable Area बनाना
<area> tag image के अंदर specific clickable region define करता है।
<area shape="rect" coords="34,44,270,350" href="computer.html" alt="Computer">
Complete Image Map Example
<!DOCTYPE html>
<html>
<body>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="computer.html" alt="Computer">
<area shape="rect" coords="290,172,333,250" href="phone.html" alt="Phone">
<area shape="circle" coords="337,300,44" href="coffee.html" alt="Coffee">
</map>
</body>
</html>
<area> Tag के Attributes
shape Attribute
यह clickable area का shape बताता है।
Possible values: rect
circle
poly
default
Example:
<area shape="circle">
coords Attribute
यह area के exact coordinates define करता है।
rect के लिए: x1,y1,x2,y2
circle के लिए: x,y,radius
poly के लिए: x1,y1,x2,y2,x3,y3…
href Attribute
Click करने पर कौन सा page open होगा।
href="page.html"
alt Attribute
Accessibility और SEO के लिए जरूरी।
alt="Laptop"
Polygon Shape Example
<area shape="poly"
coords="25,33,75,20,120,60,80,120,30,90"
href="shape.html" alt="Polygon Area">
Polygon complex shapes के लिए use किया जाता है।
Default Area
अगर image के बाकी हिस्से पर click होने पर same action चाहिए, तो default shape use किया जाता है।
<area shape="default" href="home.html">
Image Map और Responsive Design
Normal image maps responsive नहीं होते क्योंकि coordinates fixed होते हैं।
Responsive design के लिए JavaScript या CSS scaling techniques use की जाती हैं।
Accessibility के लिए Image Map
Best practices: हर <area> में alt attribute जरूर दें
Important content image map पर depend न रखें
Keyboard navigation का ध्यान रखें
Common Mistakes
usemap में # लगाना भूल जानाmap और usemap के नाम match न होना
Wrong coordinates देना
Alt text न लिखना
Image Map कब Use करें
जब: एक image में multiple links चाहिए
Diagram based navigation हो
Interactive visual layout हो
जब avoid करें: Mobile-first design
Simple navigation menus
Summary
HTML Image Map एक image को multiple clickable areas में divide करने की सुविधा देता है।<img>, <map> और <area> tags मिलकर Image Map बनाते हैं।
Correct coordinates और accessibility का ध्यान रखना जरूरी होता है।