इमेज मैप (छवि प्रतिचित्र): Difference between revisions

From Vigyanwiki
(Created page with "{{Short description|Method of adding links to parts of an image}} {{Self reference|For image maps in Wikipedia, see Extension:ImageMap.}} HTML...")
 
No edit summary
 
(10 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{Short description|Method of adding links to parts of an image}}
{{Short description|Method of adding links to parts of an image}}
{{Self reference|For image maps in Wikipedia, see [[mw:Extension:ImageMap|Extension:ImageMap]].}}
{{Self reference|विकिपीडिया में छवि मानचित्रों के लिए देखें [[mw:एक्सटेंशन:छवि मानचित्र|एक्सटेंशन:छवि मानचित्र]].}}


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


==सर्वर-साइड==
==सर्वर-साइड==
सर्वर-साइड छवि मानचित्र सबसे पहले [[मोज़ेक (वेब ​​ब्राउज़र)]] संस्करण 1.1 में समर्थित थे।<ref>{{cite web|url=http://1997.webhistory.org/www.lists/www-talk.1993q2/0343.html|title=IMG extension for Mosaic 1.1}}</ref> सर्वर-साइड छवि मानचित्र [[वेब ब्राउज़र]] को सर्वर पर स्थिति संबंधी जानकारी भेजने में सक्षम बनाता है कि उपयोगकर्ता छवि के भीतर कहां क्लिक करता है। यह सर्वर को पिक्सेल-दर-पिक्सेल निर्णय लेने की अनुमति देता है कि प्रतिक्रिया में कौन सी सामग्री लौटानी है (संभव तरीकों में सर्वर पर इमेज मास्क लेयर्स, डेटाबेस क्वेरीज़ या कॉन्फ़िगरेशन फ़ाइलों का उपयोग करना शामिल है)।
'''सर्वर-साइड इमेज मैप''' सबसे प्रथम [[मोज़ेक (वेब ​​ब्राउज़र)]] संस्करण 1.1 में समर्थित थे।<ref>{{cite web|url=http://1997.webhistory.org/www.lists/www-talk.1993q2/0343.html|title=IMG extension for Mosaic 1.1}}</ref> '''सर्वर-साइड इमेज मैप''' [[वेब ब्राउज़र]] को सर्वर पर स्थिति संबंधी सूचना भेजने में सक्षम बनाता है कि यूजर इमेज के अंदर कहां क्लिक करता है। यह सर्वर को पिक्सेल-दर-पिक्सेल निर्णय लेने की अनुमति देता है कि प्रतिक्रिया में कौन सी सामग्री लौटानी है (संभावित विधियों में सर्वर पर इमेज मास्क लेयर्स, डेटाबेस क्वेरीज़ या कॉन्फ़िगरेशन फ़ाइलों का उपयोग करना सम्मिलित है)।


इस प्रकार के सर्वर-साइड छवि मानचित्र के लिए HTML कोड की आवश्यकता होती है <code><img></code> टैग को एंकर टैग के अंदर होना चाहिए <code><a>...</a></code> और यह <code><img></code> को शामिल करना होगा <code>ismap</code> गुण।
इस प्रकार के सर्वर-साइड इमेज मैप के लिए एचटीएमएल कोड के लिए <code><img></code> टैग को एंकर टैग <code><a>...</a></code> के अंदर होना आवश्यकता है और <code><img></code> में <code>ismap</code> विशेषता सम्मिलित होनी चाहिए।
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<a href="/imagemapper"><img src="image.png" ismap /></a>
<a href="/imagemapper"><img src="image.png" ismap /></a>
</syntaxhighlight>
</syntaxhighlight>
जब उपयोगकर्ता छवि के अंदर क्लिक करता है तो ब्राउज़र एक्स और वाई निर्देशांक (छवि के ऊपरी-बाएँ कोने के सापेक्ष) को [[क्वेरी स्ट्रिंग]] के रूप में एंकर [[यूआरएल]] में जोड़ देगा और परिणामी यूआरएल तक पहुंच जाएगा।<ref>{{cite web|url=http://www.w3.org/TR/html-markup/|title=HTML: The Markup Language (an HTML language reference)}}</ref> (उदाहरण के लिए, <code>/imagemapper?3,9</code>).
जब यूजर इमेज के अंदर क्लिक करता है तो ब्राउज़र X और Y निर्देशांक (इमेज के ऊपरी-बाएँ कोने के सापेक्ष) को [[क्वेरी स्ट्रिंग]] के रूप में एंकर [[यूआरएल]] में जोड़ देगा और परिणामी यूआरएल तक पहुंच जाएगा।<ref>{{cite web|url=http://www.w3.org/TR/html-markup/|title=HTML: The Markup Language (an HTML language reference)}}</ref> (उदाहरण के लिए, <code>/imagemapper?3,9</code>)


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


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


===शुद्ध HTML===
===स्पष्ट एचटीएमएल ===
HTML में क्लाइंट-साइड इमेजमैप में दो भाग होते हैं:
एचटीएमएल में क्लाइंट-साइड इमेज मैप में दो भाग होते हैं:
# वास्तविक छवि, जो इसके साथ सन्निहित है <code><img></code> उपनाम। छवि टैग में एक विशेषता यूज़मैप होनी चाहिए, जो इस छवि के लिए उपयोग किए जाने वाले इमेजमैप का नाम देती है (एक ही पृष्ठ पर कई इमेजमैप मौजूद हो सकते हैं)।
# वास्तविक इमेज, जो <code><img></code> टैग के साथ एम्बेडेड है। इमेज टैग में विशेषता यूज़मैप होनी चाहिए, जो इस इमेज के लिए उपयोग किए जाने वाले इमेज मैप का नाम देती है (एक ही पृष्ठ पर कई इमेज मैप उपस्थित हो सकते हैं)।
# ए <code><map></code> तत्व, और उसके अंदर, <code><area></code> तत्व, जिनमें से प्रत्येक छवि मानचित्र के भीतर एक क्लिक करने योग्य क्षेत्र को परिभाषित करता है। ये के समान हैं <code><a> tag</code> यह परिभाषित करना कि एक सामान्य वेब लिंक के लिए कौन सा [[यूनिफ़ॉर्म रिसोर्स लोकेटर]] खोला जाना चाहिए। ए <code>title</code> विशेषता प्रदान की जा सकती है, जिसे [[टूलटिप]] के रूप में प्रस्तुत किया जा सकता है यदि कोई डेस्कटॉप उपयोगकर्ता अपने माउस पॉइंटर को क्षेत्र पर घुमाता है। [[ वेब पहुंच ]] कारणों से, यह अक्सर महत्वपूर्ण होता है - और कुछ मामलों में यह कानूनी या संविदात्मक आवश्यकता भी हो सकती है - एक प्रदान करना <code>alt</code> विशेषता उस लिंक का वर्णन करती है जिसे [[स्क्रीन रीडर]] सॉफ़्टवेयर पढ़ सकता है, उदाहरण के लिए, [[ अंधापन ]] उपयोगकर्ता।<ref name='access-ability'>{{cite web|url=http://accessibility.psu.edu/imagemaps|title=HTML में छवि मानचित्र|work=AccessAbility|publisher=[[Penn State University]]|access-date=6 October 2013}}</ref>
#<code><map></code> तत्व, और उसके अंदर, <code><area></code> तत्व, जिनमें से प्रत्येक इमेज मैप के अंदर एकल क्लिक करने योग्य क्षेत्र को परिभाषित करता है। ये <code><a> tag</code> के समान हैं जो परिभाषित करते हैं कि सामान्य वेब लिंक के लिए कौन सा [[यूनिफ़ॉर्म रिसोर्स लोकेटर|यूआरएल]] खोला जाना चाहिए। <code>title</code> विशेषता प्रदान की जा सकती है, जिसे [[टूलटिप]] के रूप में प्रस्तुत किया जा सकता है यदि कोई डेस्कटॉप यूजर अपने माउस पॉइंटर को क्षेत्र पर घुमाता है।[[ वेब पहुंच | वेब एक्सेसिबिलिटी]] कारणों से, यह प्रायः महत्वपूर्ण होता है - और कुछ स्थितियों में यह कानूनी या संविदात्मक आवश्यकता भी हो सकती है - उस लिंक का वर्णन करने वाली <code>alt</code> विशेषता प्रदान करने के लिए [[स्क्रीन रीडर]] सॉफ़्टवेयर उदाहरण के लिए,[[ अंधापन | नेत्रहीन]] यूजर को पढ़ सकता है।<ref name="access-ability">{{cite web|url=http://accessibility.psu.edu/imagemaps|title=HTML में छवि मानचित्र|work=AccessAbility|publisher=[[Penn State University]]|access-date=6 October 2013}}</ref>


  <code><area></code> ई> तत्व आयताकार हो सकते हैं (<code>shape="rect"</code>), बहुभुज (<code>shape="poly"</code>) या वृत्त (<code>shape="circle"</code>).
  <code><area></code> तत्व आयताकार (<code>shape="rect"</code>), बहुभुज (<code>shape="poly"</code>) या वृत्त (<code>shape="circle"</code>)हो सकते हैं। आकार-मान निर्देशांक-जोड़े हैं।
आकार-मान निर्देशांक-जोड़े हैं। प्रत्येक जोड़ी में एक X और एक Y मान होता है (छवि के बाएं/ऊपर से) और इसे अल्पविराम से अलग किया जाता है।
प्रत्येक जोड़ी में X और Y मान होता है (इमेज के बाएं/ऊपर से) और इसे अल्पविराम से अलग किया जाता है।


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


निम्नलिखित उदाहरण एक आयताकार क्षेत्र (9,372,66,397) को परिभाषित करता है। जब कोई उपयोगकर्ता इस क्षेत्र के अंदर कहीं भी क्लिक करता है, तो उसे [[अंग्रेजी विकिपीडिया]] के होम पेज पर ले जाया जाता है।
निम्नलिखित उदाहरण आयताकार क्षेत्र (9,372,66,397) को परिभाषित करता है। जब कोई यूजर इस क्षेत्र के अंदर कहीं भी क्लिक करता है, तो उसे [[अंग्रेजी विकिपीडिया]] के होम पेज पर ले जाया जाता है।
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<img src="image.png" alt="Website map" usemap="#mapname" />
<img src="image.png" alt="Website map" usemap="#mapname" />
Line 38: Line 38:
</syntaxhighlight>
</syntaxhighlight>


[[सीएसएस|'''सीएसएस''']]


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


==निर्माण एवं उपयोग==
==निर्माण एवं उपयोग==
<!-- This set of numbers and wikilinks is an imagemap.  It is tricky to edit by hand.  It is suggested that any errors should be corrected in the version on "[[The Club (dining club)]]" so that others can recopy to fix long standing errors.  Note hyperlinks will not go in the description - its a known bug in 2007 -->
टेक्स्ट एडिटर का उपयोग करके हाथ से क्लाइंट-साइड इमेज मैप बनाना संभव है, किन्तु ऐसा करने के लिए वेब डिज़ाइनरों को यह जानना आवश्यक है कि एचटीएमएल को कैसे कोड किया जाए और साथ ही उन क्षेत्रों के निर्देशांक की गणना कैसे की जाए जिन्हें वे इमेज पर रखना चाहते हैं। परिणामस्वरूप, हाथ से कोड किए गए अधिकांश इमेज मैप सरल बहुभुज होते हैं।
<इमेजमैप>File:JoshuaReynoldsParty.jpg|द [[क्लब (डाइनिंग क्लब)]] का छवि मानचित्र उदाहरण। चित्र में किसी व्यक्ति पर क्लिक करने से ब्राउज़र उचित लेख लोड करता है।|350px|अंगूठा


सर्कल 100 141 20 [[जोशुआ रेनॉल्ड्स]]
क्योंकि टेक्स्ट एडिटर में इमेज मैप बनाने के लिए अधिक समय और प्रयास की आवश्यकता होती है, इसलिए वेब डिजाइनरों को इमेज मैप शीघ्रता और सरलता से बनाने की अनुमति देने के लिए कई एप्लिकेशन डिज़ाइन किए गए हैं, जैसे [[वेक्टर ग्राफ़िक्स संपादक]] में आकार बनाते हैं। इन अनुप्रयोगों के उदाहरण एडोब के[[ Dreamweaver | ड्रीमवीवर]] या [[KImageMapEditor]] ([[KDE|केडीई]] के लिए), और [[GIMP|जीआईएमपी]] में पाया जाने वाला इमेज मैप प्लगइन हैं। फ्री और ओपन-सोर्स ऑफिस सुइट लिब्रेऑफिस में  समर्पित इमेज मैप संपादक भी सम्मिलितहै।<ref>{{cite web |title=लिबरऑफिस इमेजमैप संपादक सहायता|url=https://help.libreoffice.org/7.5/en-US/text/shared/guide/imagemap.html}}</ref>
रेक्ट 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 द क्लब (डाइनिंग क्लब)


विवरण नीचे-बाएँ
इमेज मैप जो अपने क्लिक करने योग्य क्षेत्रों को स्पष्ट नहीं बनाते हैं, यूजर को रहस्यमय नेविगेशन के अधीन होने का संकट उठाते हैं। यहां तक ​​कि जब वे ऐसा करते हैं, तब भी वे कहां ले जाते हैं यह स्पष्ट नहीं हो सकता है। इसे रोलओवर प्रभावों से आंशिक रूप से ठीक किया जा सकता है।<ref>{{cite book
</imagemap>
 
टेक्स्ट एडिटर का उपयोग करके हाथ से क्लाइंट-साइड छवि मानचित्र बनाना संभव है, लेकिन ऐसा करने के लिए वेब डिज़ाइनरों को यह जानना आवश्यक है कि HTML को कैसे कोड किया जाए और साथ ही उन क्षेत्रों के निर्देशांक की गणना कैसे की जाए जिन्हें वे छवि पर रखना चाहते हैं। परिणामस्वरूप, हाथ से कोड किए गए अधिकांश छवि मानचित्र सरल बहुभुज होते हैं।
 
क्योंकि टेक्स्ट एडिटर में छवि मानचित्र बनाने के लिए बहुत समय और प्रयास की आवश्यकता होती है, इसलिए वेब डिजाइनरों को छवि मानचित्र जल्दी और आसानी से बनाने की अनुमति देने के लिए कई एप्लिकेशन डिज़ाइन किए गए हैं, जैसे [[वेक्टर ग्राफ़िक्स संपादक]] संपादक में आकार बनाते हैं। इन अनुप्रयोगों के उदाहरण Adobe के [[ 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
Line 79: Line 59:
   }}</ref>
   }}</ref>


 
== एसवीजी इमेजयां ==
==एसवीजी छवियां==
क्योंकि [[स्केलेबल वेक्टर ग्राफिक्स]] (एसवीजी) इमेज प्रारूप इमेजयों में हाइपरलिंक<ref>{{cite web|url=http://www.w3.org/TR/SVG11/linking.html |title=SVG specification: Linking |publisher=World Wide Web Consortium |date=16 August 2011 |access-date=24 June 2019}}</ref> और अन्य, अन्तरक्रियाशीलता के अधिक परिष्कृत रूपों<ref>{{cite web|url=http://www.w3.org/TR/SVG11/interact.html |title=SVG specification: Interactivity |publisher=World Wide Web Consortium |date=16 August 2011 |access-date=24 June 2019}}</ref> को जोड़ने के लिए अपने स्वयं की प्रणाली प्रदान करता है एसवीजी प्रारूप में वेक्टर इमेजयों के साथ कार्य करते समय पारंपरिक इमेज मैप प्रौद्योगिकी सामान्यतः आवश्यक नहीं होती हैं।
क्योंकि [[स्केलेबल वेक्टर ग्राफिक्स]] (एसवीजी) छवि प्रारूप हाइपरलिंक जोड़ने के लिए अपने स्वयं के तंत्र प्रदान करता है<ref>{{cite web|url=http://www.w3.org/TR/SVG11/linking.html |title=SVG specification: Linking |publisher=World Wide Web Consortium |date=16 August 2011 |access-date=24 June 2019}}</ref> और अन्य, अन्तरक्रियाशीलता के अधिक परिष्कृत रूप<ref>{{cite web|url=http://www.w3.org/TR/SVG11/interact.html |title=SVG specification: Interactivity |publisher=World Wide Web Consortium |date=16 August 2011 |access-date=24 June 2019}}</ref> छवियों के लिए, एसवीजी प्रारूप में वेक्टर छवियों के साथ काम करते समय पारंपरिक छवि मानचित्र तकनीक आम तौर पर आवश्यक नहीं होती हैं।


== यह भी देखें ==
== यह भी देखें ==
* रहस्य मांस नेविगेशन
* मिस्ट्री मीट नेविगेशन


==संदर्भ==
==संदर्भ==
{{reflist}}
{{reflist}}


[[Category: एचटीएमएल]] [[Category: एक्सएचटीएमएल]] [[Category: छवि मानचित्र वाले लेख]]
[[Category: Machine Translated Page]]
[[Category:Created On 07/07/2023]]
[[Category:Created On 07/07/2023]]
[[Category:Lua-based templates]]
[[Category:Machine Translated Page]]
[[Category:Pages with script errors]]
[[Category:Short description with empty Wikidata description]]
[[Category:Templates Vigyan Ready]]
[[Category:Templates that add a tracking category]]
[[Category:Templates that generate short descriptions]]
[[Category:Templates using TemplateData]]
[[Category:एक्सएचटीएमएल]]
[[Category:एचटीएमएल]]
[[Category:छवि मानचित्र वाले लेख]]

Latest revision as of 13:22, 4 September 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 में प्रस्तुत किए गए थे, और सर्वर पर निष्पादित करने के लिए किसी विशेष तर्क की आवश्यकता नहीं होती है (वे पूर्ण रूप से क्लाइंट-साइड हैं)। उन्हें किसी जावास्क्रिप्ट की भी आवश्यकता नहीं है।

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

एचटीएमएल में क्लाइंट-साइड इमेज मैप में दो भाग होते हैं:

  1. वास्तविक इमेज, जो <img> टैग के साथ एम्बेडेड है। इमेज टैग में विशेषता यूज़मैप होनी चाहिए, जो इस इमेज के लिए उपयोग किए जाने वाले इमेज मैप का नाम देती है (एक ही पृष्ठ पर कई इमेज मैप उपस्थित हो सकते हैं)।
  2. <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>

सीएसएस

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

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

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

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

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

एसवीजी इमेजयां

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

यह भी देखें

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

संदर्भ

  1. ↑ "IMG extension for Mosaic 1.1".
  2. ↑ "HTML: The Markup Language (an HTML language reference)".
  3. ↑ "HTML में छवि मानचित्र". AccessAbility. Penn State University. Retrieved 6 October 2013.
  4. ↑ "लिबरऑफिस इमेजमैप संपादक सहायता".
  5. ↑ 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.
  6. ↑ "SVG specification: Linking". World Wide Web Consortium. 16 August 2011. Retrieved 24 June 2019.
  7. ↑ "SVG specification: Interactivity". World Wide Web Consortium. 16 August 2011. Retrieved 24 June 2019.
Retrieved from ‘https://www.vigyanwiki.in/index.php?title=इमेज_मैप_(छवि_प्रतिचित्र)&oldid=255342’