इमेज मैप (छवि प्रतिचित्र)
HTML और XHTML में, एक छवि मानचित्र एक विशिष्ट छवि से संबंधित निर्देशांक की एक सूची है, जो छवि के क्षेत्रों को विभिन्न गंतव्यों से हाइपरलिंक करने के लिए बनाई जाती है (सामान्य छवि लिंक के विपरीत, जिसमें छवि का पूरा क्षेत्र लिंक होता है) एक ही गंतव्य)। उदाहरण के लिए, दुनिया के मानचित्र में प्रत्येक देश उस देश के बारे में अधिक जानकारी के लिए हाइपरलिंक हो सकता है। छवि मानचित्र का उद्देश्य छवि को अलग-अलग छवि फ़ाइलों में विभाजित किए बिना छवि के विभिन्न हिस्सों को जोड़ने का एक आसान तरीका प्रदान करना है।
सर्वर-साइड
सर्वर-साइड छवि मानचित्र सबसे पहले मोज़ेक (वेब ब्राउज़र) संस्करण 1.1 में समर्थित थे।[1] सर्वर-साइड छवि मानचित्र वेब ब्राउज़र को सर्वर पर स्थिति संबंधी जानकारी भेजने में सक्षम बनाता है कि उपयोगकर्ता छवि के भीतर कहां क्लिक करता है। यह सर्वर को पिक्सेल-दर-पिक्सेल निर्णय लेने की अनुमति देता है कि प्रतिक्रिया में कौन सी सामग्री लौटानी है (संभव तरीकों में सर्वर पर इमेज मास्क लेयर्स, डेटाबेस क्वेरीज़ या कॉन्फ़िगरेशन फ़ाइलों का उपयोग करना शामिल है)।
इस प्रकार के सर्वर-साइड छवि मानचित्र के लिए HTML कोड की आवश्यकता होती है <img> टैग को एंकर टैग के अंदर होना चाहिए <a>...</a> और यह <img> को शामिल करना होगा ismap गुण।
<a href="/imagemapper"><img src="image.png" ismap /></a>
जब उपयोगकर्ता छवि के अंदर क्लिक करता है तो ब्राउज़र एक्स और वाई निर्देशांक (छवि के ऊपरी-बाएँ कोने के सापेक्ष) को क्वेरी स्ट्रिंग के रूप में एंकर यूआरएल में जोड़ देगा और परिणामी यूआरएल तक पहुंच जाएगा।[2] (उदाहरण के लिए, /imagemapper?3,9).
यदि ब्राउज़र समर्थन नहीं करता है ismap तो क्वेरी स्ट्रिंग को एंकर URL में नहीं जोड़ा जाना चाहिए और सर्वर को उचित रूप से प्रतिक्रिया देनी चाहिए (उदाहरण के लिए, केवल-पाठ नेविगेशन पृष्ठ लौटाकर)।
क्लाइंट-साइड
क्लाइंट-साइड छवि मानचित्र HTML 3.2 में पेश किए गए थे, और सर्वर पर निष्पादित करने के लिए किसी विशेष तर्क की आवश्यकता नहीं होती है (वे पूरी तरह से क्लाइंट-साइड हैं)। उन्हें किसी जावास्क्रिप्ट की भी आवश्यकता नहीं है।
शुद्ध HTML
HTML में क्लाइंट-साइड इमेजमैप में दो भाग होते हैं:
- वास्तविक छवि, जो इसके साथ सन्निहित है
<img>उपनाम। छवि टैग में एक विशेषता यूज़मैप होनी चाहिए, जो इस छवि के लिए उपयोग किए जाने वाले इमेजमैप का नाम देती है (एक ही पृष्ठ पर कई इमेजमैप मौजूद हो सकते हैं)। - ए
<map>तत्व, और उसके अंदर,<area>तत्व, जिनमें से प्रत्येक छवि मानचित्र के भीतर एक क्लिक करने योग्य क्षेत्र को परिभाषित करता है। ये के समान हैं<a> tagयह परिभाषित करना कि एक सामान्य वेब लिंक के लिए कौन सा यूनिफ़ॉर्म रिसोर्स लोकेटर खोला जाना चाहिए। एtitleविशेषता प्रदान की जा सकती है, जिसे टूलटिप के रूप में प्रस्तुत किया जा सकता है यदि कोई डेस्कटॉप उपयोगकर्ता अपने माउस पॉइंटर को क्षेत्र पर घुमाता है। वेब पहुंच कारणों से, यह अक्सर महत्वपूर्ण होता है - और कुछ मामलों में यह कानूनी या संविदात्मक आवश्यकता भी हो सकती है - एक प्रदान करनाaltविशेषता उस लिंक का वर्णन करती है जिसे स्क्रीन रीडर सॉफ़्टवेयर पढ़ सकता है, उदाहरण के लिए, अंधापन उपयोगकर्ता।[3]
<area>ई> तत्व आयताकार हो सकते हैं (shape="rect"), बहुभुज (shape="poly") या वृत्त (shape="circle").
आकार-मान निर्देशांक-जोड़े हैं। प्रत्येक जोड़ी में एक X और एक Y मान होता है (छवि के बाएं/ऊपर से) और इसे अल्पविराम से अलग किया जाता है।
- आयत: चार निर्देशांक सेट करें: x1,y1,x2,y2
- बहुभुज: जितने चाहें उतने निर्देशांक सेट करें (दो का गुणज): x1,y1,x2,y2, [...] xn,yn
- वृत्त: एक निर्देशांक-युग्म और त्रिज्या के साथ दूसरा मान: x1,y1,radius
निम्नलिखित उदाहरण एक आयताकार क्षेत्र (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>
सीएसएस
सीएसएस निरपेक्ष स्थिति का उपयोग करके एक छवि पर लिंक को ओवरले करना एक अधिक आधुनिक दृष्टिकोण है; हालाँकि, यह केवल आयताकार क्लिक करने योग्य क्षेत्रों का समर्थन करता है। यह सीएसएस तकनीक आईफ़ोन पर छवि मानचित्र को ठीक से काम करने के लिए उपयुक्त हो सकती है, जो शुद्ध HTML छवि मानचित्रों को सही ढंग से पुन: स्केल करने में विफल हो सकती है।
निर्माण एवं उपयोग
<इमेजमैप>File:JoshuaReynoldsParty.jpg|द क्लब (डाइनिंग क्लब) का छवि मानचित्र उदाहरण। चित्र में किसी व्यक्ति पर क्लिक करने से ब्राउज़र उचित लेख लोड करता है।|350px|अंगूठा
सर्कल 100 141 20 जोशुआ रेनॉल्ड्स रेक्ट 286 87 376 191 जोशुआ रेनॉल्ड्स रेक्ट 450 86 584 188 जोशुआ रेनॉल्ड्स|प्रोब। शिशु अकादमी 1782 पॉली 76 224 84 255 43 302 62 400 123 423 121 361 137 344 122 290 111 234 96 225 जेम्स बोसवेल|बोसवेल - जीवनी लेखक पॉली 133 343 124 287 159 224 189 228 195 291 222 311 209 343 209 354 243 362 292 466 250 463 सैमुअल जॉनसन|डॉ जॉनसन - शब्दकोश लेखक पॉली 190 276 208 240 229 228 247 238 250 258 286 319 282 323 223 323 220 301 200 295 जोशुआ रेनॉल्ड्स|सर जोशुआ रेनॉल्ड्स - मेजबान पॉली 308 317 311 270 328 261 316 246 320 228 343 227 357 240 377 274 366 284 352 311 319 324 डेविड गैरिक|डेविड गैरिक - अभिनेता पॉली 252 406 313 343 341 343 366 280 383 273 372 251 378 222 409 228 414 280 420 292 390 300 374 360 359 437 306 418 313 391 272 415 एडमंड बर्क|एडमंड बर्क - राजनेता रेक्ट 418 220 452 287 पास्क्वेले पाओली|पास्कल पाओली - कोर्सीकन देशभक्त पॉली 455 238 484 253 505 303 495 363 501 377 491 443 429 439 423 375 466 352 चार्ल्स बर्नी|चार्ल्स बर्नी - संगीत इतिहासकार पाली 503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215 फ्रांसिस नाई|नौकर - कब्ज़ा। फ्रांसिस नाई पॉली 501 279 546 237 567 239 572 308 560 326 537 316 530 300 502 289 थॉमस वार्टन|थॉमस वार्टन - कवि पुरस्कार विजेता पाली 572 453 591 446 572 373 603 351 562 325 592 288 573 260 573 248 591 243 615 254 637 280 655 334 705 396 656 419 625 382 609 391 613 453 ओलिवर गोल्डस्मिथ|ओलिवर गोल्डस्मिथ - लेखक रेक्ट 5 5 720 518 द क्लब (डाइनिंग क्लब)
विवरण नीचे-बाएँ </imagemap>
टेक्स्ट एडिटर का उपयोग करके हाथ से क्लाइंट-साइड छवि मानचित्र बनाना संभव है, लेकिन ऐसा करने के लिए वेब डिज़ाइनरों को यह जानना आवश्यक है कि HTML को कैसे कोड किया जाए और साथ ही उन क्षेत्रों के निर्देशांक की गणना कैसे की जाए जिन्हें वे छवि पर रखना चाहते हैं। परिणामस्वरूप, हाथ से कोड किए गए अधिकांश छवि मानचित्र सरल बहुभुज होते हैं।
क्योंकि टेक्स्ट एडिटर में छवि मानचित्र बनाने के लिए बहुत समय और प्रयास की आवश्यकता होती है, इसलिए वेब डिजाइनरों को छवि मानचित्र जल्दी और आसानी से बनाने की अनुमति देने के लिए कई एप्लिकेशन डिज़ाइन किए गए हैं, जैसे वेक्टर ग्राफ़िक्स संपादक संपादक में आकार बनाते हैं। इन अनुप्रयोगों के उदाहरण Adobe के Dreamweaver या KImageMapEditor (KDE के लिए), और GIMP में पाया जाने वाला इमेजमैप प्लगइन हैं। मुफ़्त और ओपन-सोर्स ऑफिस सुइट लिबरऑफिस में एक समर्पित इमेजमैप संपादक भी शामिल है।[4] छवि मानचित्र जो अपने क्लिक करने योग्य क्षेत्रों को स्पष्ट नहीं बनाते हैं, उपयोगकर्ता को रहस्यमय नेविगेशन के अधीन होने का जोखिम उठाते हैं। यहां तक कि जब वे ऐसा करते हैं, तब भी वे कहां ले जाते हैं यह स्पष्ट नहीं हो सकता है। इसे रोलओवर प्रभावों से आंशिक रूप से ठीक किया जा सकता है।[5]
एसवीजी छवियां
क्योंकि स्केलेबल वेक्टर ग्राफिक्स (एसवीजी) छवि प्रारूप हाइपरलिंक जोड़ने के लिए अपने स्वयं के तंत्र प्रदान करता है[6] और अन्य, अन्तरक्रियाशीलता के अधिक परिष्कृत रूप[7] छवियों के लिए, एसवीजी प्रारूप में वेक्टर छवियों के साथ काम करते समय पारंपरिक छवि मानचित्र तकनीक आम तौर पर आवश्यक नहीं होती हैं।
यह भी देखें
- रहस्य मांस नेविगेशन
संदर्भ
- ↑ "IMG extension for Mosaic 1.1".
- ↑ "HTML: The Markup Language (an HTML language reference)".
- ↑ "HTML में छवि मानचित्र". AccessAbility. Penn State University. Retrieved 6 October 2013.
- ↑ "लिबरऑफिस इमेजमैप संपादक सहायता".
- ↑ Flanders, Vincent (March 1998). Web Pages That Suck: Learn Good Design by Looking at Bad Design. San Francisco: Sybex Inc. ISBN 978-0-7821-2187-2.
- ↑ "SVG specification: Linking". World Wide Web Consortium. 16 August 2011. Retrieved 24 June 2019.
- ↑ "SVG specification: Interactivity". World Wide Web Consortium. 16 August 2011. Retrieved 24 June 2019.
