इमेज मैप (छवि प्रतिचित्र): Difference between revisions
No edit summary |
No edit summary |
||
| Line 63: | Line 63: | ||
</imagemap> | </imagemap> | ||
टेक्स्ट एडिटर का उपयोग करके हाथ से क्लाइंट-साइड छवि मानचित्र बनाना संभव है, | टेक्स्ट एडिटर का उपयोग करके हाथ से क्लाइंट-साइड छवि मानचित्र बनाना संभव है, किन्तु ऐसा करने के लिए वेब डिज़ाइनरों को यह जानना आवश्यक है कि एचटीएमएल को कैसे कोड किया जाए और साथ ही उन क्षेत्रों के निर्देशांक की गणना कैसे की जाए जिन्हें वे छवि पर रखना चाहते हैं। परिणामस्वरूप, हाथ से कोड किए गए अधिकांश छवि मानचित्र सरल बहुभुज होते हैं। | ||
क्योंकि टेक्स्ट एडिटर में छवि मानचित्र बनाने के लिए | क्योंकि टेक्स्ट एडिटर में छवि मानचित्र बनाने के लिए अधिक समय और प्रयास की आवश्यकता होती है, इसलिए वेब डिजाइनरों को छवि मानचित्र शीघ्रता और सरलता से बनाने की अनुमति देने के लिए कई एप्लिकेशन डिज़ाइन किए गए हैं, जैसे [[वेक्टर ग्राफ़िक्स संपादक]] में आकार बनाते हैं। इन अनुप्रयोगों के उदाहरण एडोब के[[ Dreamweaver | ड्रीमवीवर]] या [[KImageMapEditor]] ([[KDE|केडीई]] के लिए), और [[GIMP|जीआईएमपी]] में पाया जाने वाला छवि मानचित्र प्लगइन हैं। मुफ़्त और ओपन-सोर्स ऑफिस सुइट लिब्रेऑफिस में समर्पित छवि मानचित्र संपादक भी सम्मिलितहै।<ref>{{cite web |title=लिबरऑफिस इमेजमैप संपादक सहायता|url=https://help.libreoffice.org/7.5/en-US/text/shared/guide/imagemap.html}}</ref> | ||
छवि मानचित्र जो अपने क्लिक करने योग्य क्षेत्रों को स्पष्ट नहीं बनाते हैं, उपयोगकर्ता को रहस्यमय नेविगेशन के अधीन होने का | |||
छवि मानचित्र जो अपने क्लिक करने योग्य क्षेत्रों को स्पष्ट नहीं बनाते हैं, उपयोगकर्ता को रहस्यमय नेविगेशन के अधीन होने का संकट उठाते हैं। यहां तक कि जब वे ऐसा करते हैं, तब भी वे कहां ले जाते हैं यह स्पष्ट नहीं हो सकता है। इसे रोलओवर प्रभावों से आंशिक रूप से ठीक किया जा सकता है।<ref>{{cite book | |||
| last = Flanders | | last = Flanders | ||
| first = Vincent | | first = Vincent | ||
Revision as of 21:29, 18 July 2023
एचटीएमएल और एक्सएचटीएमएल में, छवि मानचित्र विशिष्ट छवि से संबंधित निर्देशांक की सूची है, जो छवि के क्षेत्रों को विभिन्न गंतव्यों से हाइपरलिंक करने के लिए बनाई जाती है (सामान्य छवि लिंक के विपरीत, जिसमें छवि का पूर्ण क्षेत्र गंतव्य से लिंक होता है)। उदाहरण के लिए, विश्व के मानचित्र में प्रत्येक देश उस देश के विषय में अधिक सूचना के लिए हाइपरलिंक हो सकता है। छवि मानचित्र का उद्देश्य छवि को भिन्न-भिन्न छवि फ़ाइलों में विभाजित किए बिना छवि के विभिन्न भागों को जोड़ने की सरल विधि प्रदान करना है।
सर्वर-साइड
सर्वर-साइड छवि मानचित्र सबसे प्रथम मोज़ेक (वेब ब्राउज़र) संस्करण 1.1 में समर्थित थे।[1] सर्वर-साइड छवि मानचित्र वेब ब्राउज़र को सर्वर पर स्थिति संबंधी सूचना भेजने में सक्षम बनाता है कि उपयोगकर्ता छवि के अंदर कहां क्लिक करता है। यह सर्वर को पिक्सेल-दर-पिक्सेल निर्णय लेने की अनुमति देता है कि प्रतिक्रिया में कौन सी सामग्री लौटानी है (संभावित विधियों में सर्वर पर इमेज मास्क लेयर्स, डेटाबेस क्वेरीज़ या कॉन्फ़िगरेशन फ़ाइलों का उपयोग करना सम्मिलित है)।
इस प्रकार के सर्वर-साइड छवि मानचित्र के लिए एचटीएमएल कोड के लिए <img> टैग को एंकर टैग <a>...</a> के अंदर होना आवश्यकता है और <img> में ismap विशेषता सम्मिलित होनी चाहिए।
<a href="/imagemapper"><img src="image.png" ismap /></a>
जब उपयोगकर्ता छवि के अंदर क्लिक करता है तो ब्राउज़र X और Y निर्देशांक (छवि के ऊपरी-बाएँ कोने के सापेक्ष) को क्वेरी स्ट्रिंग के रूप में एंकर यूआरएल में जोड़ देगा और परिणामी यूआरएल तक पहुंच जाएगा।[2] (उदाहरण के लिए, /imagemapper?3,9)
यदि ब्राउज़र ismap का समर्थन नहीं करता हैतो क्वेरी स्ट्रिंग को एंकर यूआरएल में नहीं जोड़ा जाना चाहिए और सर्वर को उचित रूप से प्रतिक्रिया देनी चाहिए (उदाहरण के लिए, केवल-पाठ नेविगेशन पृष्ठ लौटाकर)।
क्लाइंट-साइड
क्लाइंट-साइड छवि मानचित्र एचटीएमएल 3.2 में प्रस्तुत किए गए थे, और सर्वर पर निष्पादित करने के लिए किसी विशेष तर्क की आवश्यकता नहीं होती है (वे पूर्ण रूप से क्लाइंट-साइड हैं)। उन्हें किसी जावास्क्रिप्ट की भी आवश्यकता नहीं है।
स्पष्ट एचटीएमएल
एचटीएमएल में क्लाइंट-साइड छवि मानचित्र में दो भाग होते हैं:
- वास्तविक छवि, जो
<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,त्रिज्या होता है।
निम्नलिखित उदाहरण आयताकार क्षेत्र (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>
सीएसएस निरपेक्ष स्थिति का उपयोग करके छवि पर लिंक को ओवरले करना अधिक आधुनिक दृष्टिकोण है; चूँकि, यह केवल आयताकार क्लिक करने योग्य क्षेत्रों का समर्थन करता है। यह सीएसएस प्रौद्योगिकी आईफ़ोन पर छवि मानचित्र को ठीक से कार्य करने के लिए उपयुक्त हो सकती है, जो स्पष्ट एचटीएमएल छवि मानचित्रों को उचित रूप से पुन: स्केल करने में विफल हो सकती है।
निर्माण एवं उपयोग
द क्लब (डाइनिंग क्लब) का छवि मानचित्र उदाहरण। चित्र में किसी व्यक्ति पर क्लिक करने से ब्राउज़र उचित लेख लोड करता है।|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>
टेक्स्ट एडिटर का उपयोग करके हाथ से क्लाइंट-साइड छवि मानचित्र बनाना संभव है, किन्तु ऐसा करने के लिए वेब डिज़ाइनरों को यह जानना आवश्यक है कि एचटीएमएल को कैसे कोड किया जाए और साथ ही उन क्षेत्रों के निर्देशांक की गणना कैसे की जाए जिन्हें वे छवि पर रखना चाहते हैं। परिणामस्वरूप, हाथ से कोड किए गए अधिकांश छवि मानचित्र सरल बहुभुज होते हैं।
क्योंकि टेक्स्ट एडिटर में छवि मानचित्र बनाने के लिए अधिक समय और प्रयास की आवश्यकता होती है, इसलिए वेब डिजाइनरों को छवि मानचित्र शीघ्रता और सरलता से बनाने की अनुमति देने के लिए कई एप्लिकेशन डिज़ाइन किए गए हैं, जैसे वेक्टर ग्राफ़िक्स संपादक में आकार बनाते हैं। इन अनुप्रयोगों के उदाहरण एडोब के ड्रीमवीवर या KImageMapEditor (केडीई के लिए), और जीआईएमपी में पाया जाने वाला छवि मानचित्र प्लगइन हैं। मुफ़्त और ओपन-सोर्स ऑफिस सुइट लिब्रेऑफिस में समर्पित छवि मानचित्र संपादक भी सम्मिलितहै।[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.
