इमेज मैप (छवि प्रतिचित्र)

एचटीएमएल और एक्सएचटीएमएल में, छवि मानचित्र विशिष्ट छवि से संबंधित निर्देशांक की सूची है, जो छवि के क्षेत्रों को विभिन्न गंतव्यों से हाइपरलिंक करने के लिए बनाई जाती है (सामान्य छवि लिंक के विपरीत, जिसमें छवि का पूर्ण क्षेत्र गंतव्य से लिंक होता है)। उदाहरण के लिए, विश्व के मानचित्र में प्रत्येक देश उस देश के विषय में अधिक सूचना के लिए हाइपरलिंक हो सकता है। छवि मानचित्र का उद्देश्य छवि को भिन्न-भिन्न छवि फ़ाइलों में विभाजित किए बिना छवि के विभिन्न भागों को जोड़ने की सरल विधि प्रदान करना है।

सर्वर-साइड

सर्वर-साइड छवि मानचित्र सबसे प्रथम मोज़ेक (वेब ​​ब्राउज़र) संस्करण 1.1 में समर्थित थे। सर्वर-साइड छवि मानचित्र वेब ब्राउज़र को सर्वर पर स्थिति संबंधी सूचना भेजने में सक्षम बनाता है कि उपयोगकर्ता छवि के अंदर कहां क्लिक करता है। यह सर्वर को पिक्सेल-दर-पिक्सेल निर्णय लेने की अनुमति देता है कि प्रतिक्रिया में कौन सी सामग्री लौटानी है (संभावित विधियों में सर्वर पर इमेज मास्क लेयर्स, डेटाबेस क्वेरीज़ या कॉन्फ़िगरेशन फ़ाइलों का उपयोग करना सम्मिलित है)।

इस प्रकार के सर्वर-साइड छवि मानचित्र के लिए एचटीएमएल कोड के लिए <img> टैग को एंकर टैग <a>...</a> के अंदर होना आवश्यकता है और <img> में ismap विशेषता सम्मिलित होनी चाहिए।

<a href="/imagemapper"><img src="image.png" ismap /></a>

जब उपयोगकर्ता छवि के अंदर क्लिक करता है तो ब्राउज़र X और Y निर्देशांक (छवि के ऊपरी-बाएँ कोने के सापेक्ष) को क्वेरी स्ट्रिंग के रूप में एंकर यूआरएल में जोड़ देगा और परिणामी यूआरएल तक पहुंच जाएगा। (उदाहरण के लिए, /imagemapper?3,9)

यदि ब्राउज़र ismap का समर्थन नहीं करता हैतो क्वेरी स्ट्रिंग को एंकर यूआरएल में नहीं जोड़ा जाना चाहिए और सर्वर को उचित रूप से प्रतिक्रिया देनी चाहिए (उदाहरण के लिए, केवल-पाठ नेविगेशन पृष्ठ लौटाकर)।

क्लाइंट-साइड

क्लाइंट-साइड छवि मानचित्र एचटीएमएल 3.2 में प्रस्तुत किए गए थे, और सर्वर पर निष्पादित करने के लिए किसी विशेष तर्क की आवश्यकता नहीं होती है (वे पूर्ण रूप से क्लाइंट-साइड हैं)। उन्हें किसी जावास्क्रिप्ट की भी आवश्यकता नहीं है।

स्पष्ट एचटीएमएल

एचटीएमएल में क्लाइंट-साइड छवि मानचित्र में दो भाग होते हैं:

1. वास्तविक छवि, जो <img> टैग के साथ एम्बेडेड है। छवि टैग में विशेषता यूज़मैप होनी चाहिए, जो इस छवि के लिए उपयोग किए जाने वाले छवि मानचित्र का नाम देती है (एक ही पृष्ठ पर कई छवि मानचित्र उपस्थित हो सकते हैं)।
2. <map> तत्व, और उसके अंदर, <area> तत्व, जिनमें से प्रत्येक छवि मानचित्र के अंदर एकल क्लिक करने योग्य क्षेत्र को परिभाषित करता है। ये <a> tag के समान हैं जो परिभाषित करते हैं कि सामान्य वेब लिंक के लिए कौन सा यूआरएल खोला जाना चाहिए। title विशेषता प्रदान की जा सकती है, जिसे टूलटिप के रूप में प्रस्तुत किया जा सकता है यदि कोई डेस्कटॉप उपयोगकर्ता अपने माउस पॉइंटर को क्षेत्र पर घुमाता है। वेब एक्सेसिबिलिटी कारणों से, यह प्रायः महत्वपूर्ण होता है - और कुछ स्थितियों में यह कानूनी या संविदात्मक आवश्यकता भी हो सकती है - उस लिंक का वर्णन करने वाली alt विशेषता प्रदान करने के लिए स्क्रीन रीडर सॉफ़्टवेयर उदाहरण के लिए, नेत्रहीन उपयोगकर्ता को पढ़ सकता है।

<area> तत्व आयताकार (shape="rect"), बहुभुज (shape="poly") या वृत्त (shape="circle")हो सकते हैं। आकार-मान निर्देशांक-जोड़े हैं।

प्रत्येक जोड़ी में X और Y मान होता है (छवि के बाएं/ऊपर से) और इसे अल्पविराम से अलग किया जाता है।

• आयत: चार निर्देशांक: x1,y1,x2,y2 सेट करें।
• बहुभुज: जितने चाहें उतने निर्देशांक (दो का गुणज): x1,y1,x2,y2, [...] xn,yn सेट करें।
• वृत्त: निर्देशांक-युग्म और दूसरा मान त्रिज्या के साथ: x1,y1,त्रिज्या होता है।

निम्नलिखित उदाहरण आयताकार क्षेत्र (9,372,66,397) को परिभाषित करता है। जब कोई उपयोगकर्ता इस क्षेत्र के अंदर कहीं भी क्लिक करता है, तो उसे अंग्रेजी विकिपीडिया के होम पेज पर ले जाया जाता है।

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>

सीएसएस

सीएसएस निरपेक्ष स्थिति का उपयोग करके छवि पर लिंक को ओवरले करना अधिक आधुनिक दृष्टिकोण है; चूँकि, यह केवल आयताकार क्लिक करने योग्य क्षेत्रों का समर्थन करता है। यह सीएसएस प्रौद्योगिकी आईफ़ोन पर छवि मानचित्र को ठीक से कार्य करने के लिए उपयुक्त हो सकती है, जो स्पष्ट एचटीएमएल छवि मानचित्रों को उचित रूप से पुन: स्केल करने में विफल हो सकती है।

निर्माण एवं उपयोग

टेक्स्ट एडिटर का उपयोग करके हाथ से क्लाइंट-साइड छवि मानचित्र बनाना संभव है, किन्तु ऐसा करने के लिए वेब डिज़ाइनरों को यह जानना आवश्यक है कि एचटीएमएल को कैसे कोड किया जाए और साथ ही उन क्षेत्रों के निर्देशांक की गणना कैसे की जाए जिन्हें वे छवि पर रखना चाहते हैं। परिणामस्वरूप, हाथ से कोड किए गए अधिकांश छवि मानचित्र सरल बहुभुज होते हैं।

क्योंकि टेक्स्ट एडिटर में छवि मानचित्र बनाने के लिए अधिक समय और प्रयास की आवश्यकता होती है, इसलिए वेब डिजाइनरों को छवि मानचित्र शीघ्रता और सरलता से बनाने की अनुमति देने के लिए कई एप्लिकेशन डिज़ाइन किए गए हैं, जैसे वेक्टर ग्राफ़िक्स संपादक में आकार बनाते हैं। इन अनुप्रयोगों के उदाहरण एडोब के ड्रीमवीवर या KImageMapEditor (केडीई के लिए), और जीआईएमपी में पाया जाने वाला छवि मानचित्र प्लगइन हैं। मुफ़्त और ओपन-सोर्स ऑफिस सुइट लिब्रेऑफिस में समर्पित छवि मानचित्र संपादक भी सम्मिलितहै।

छवि मानचित्र जो अपने क्लिक करने योग्य क्षेत्रों को स्पष्ट नहीं बनाते हैं, उपयोगकर्ता को रहस्यमय नेविगेशन के अधीन होने का संकट उठाते हैं। यहां तक ​​कि जब वे ऐसा करते हैं, तब भी वे कहां ले जाते हैं यह स्पष्ट नहीं हो सकता है। इसे रोलओवर प्रभावों से आंशिक रूप से ठीक किया जा सकता है।

एसवीजी छवियां

क्योंकि स्केलेबल वेक्टर ग्राफिक्स (एसवीजी) छवि प्रारूप छवियों में हाइपरलिंक और अन्य, अन्तरक्रियाशीलता के अधिक परिष्कृत रूपों को जोड़ने के लिए अपने स्वयं की प्रणाली प्रदान करता है एसवीजी प्रारूप में वेक्टर छवियों के साथ कार्य करते समय पारंपरिक छवि मानचित्र प्रौद्योगिकी सामान्यतः आवश्यक नहीं होती हैं।

यह भी देखें

• मिस्ट्री मीट नेविगेशन