इमेज मैप इन HTML
HTML में, इमेज मैप (Image Map) का उपयोग वेब पेज पर उपयोगकर्ताओं को किसी इमेज के विभिन्न भागों पर क्लिक करने की अनुमति देता है और उन्हें उस क्लिक के आधार पर निर्दिष्ट कार्रवाई करने की सुविधा प्रदान करता है। इमेज मैप का उपयोग करके आप इमेज के विभिन्न हिस्सों को आरेखित करके या सीमाओं द्वारा निर्दिष्ट करके उपयोगकर्ताओं को विभिन्न क्लिक क्षेत्रों में नेविगेट करने की सुविधा प्रदान करते हैं।
इमेज मैप को HTML में निर्मित करने के लिए आपको निम्नलिखित तत्वों का उपयोग करना होगा:
- <img>: <img> एलिमेंट के साथ usemap एट्रिब्यूट का उपयोग करें और इमेज को निर्दिष्ट इमेज मैप के साथ जोड़ें।
- <map>: <map> एलिमेंट का उपयोग करके इमेज मैप की परिभाषा करें।
- <area>: <area> एलिमेंट का उपयोग करके इमेज मैप के भागों (क्लिक क्षेत्रों) को निर्दिष्ट करें।
यहां एक उदाहरण है जो दिखाता है कि कैसे एक इमेज मैप बनाया जाता है:
<!DOCTYPE html><html>
<head>
<title>इमेज मैप उदाहरण</title>
</head>
<body>
<h1>इमेज मैप उदाहरण</h1>
<img src="image.jpg" alt="इमेज" usemap="#map1">
<map name="map1">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="क्लिक करें 1">
<area shape="circle" coords="150,150,50" href="page2.html" alt="क्लिक करें 2">
<area shape="poly" coords="200,200,250,250,200,300" href="page3.html" alt="क्लिक करें 3">
</map>
</body>
</html>
इस उदाहरण में, हमने <img> एलिमेंट का उपयोग करके एक इमेज को प्रदर्शित किया है। <map> एलिमेंट का उपयोग करके हमने इमेज मैप को परिभाषित किया है और <area> एलिमेंट का उपयोग करके हमने इमेज मैप के भागों (क्लिक क्षेत्रों) को निर्दिष्ट किया है। प्रत्येक <area> एलिमेंट को विशेषता shape (आकार), coords (संयोजन) और href (लिंक) के साथ परिभाषित किया गया है।
इमेज मैप के उपयोग से उपयोगकर्ता इमेज के विभिन्न क्षेत्रों पर क्लिक करके निर्दिष्ट पृष्ठों या लिंकों पर नेविगेट कर सकते हैं।