इमेज मैप (छवि प्रतिचित्र): Difference between revisions
From Vigyanwiki
No edit summary |
No edit summary |
||
| (9 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| | {{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> '''सर्वर-साइड इमेज मैप''' [[वेब ब्राउज़र]] को सर्वर पर स्थिति संबंधी सूचना भेजने में सक्षम बनाता है कि यूजर इमेज के अंदर कहां क्लिक करता है। यह सर्वर को पिक्सेल-दर-पिक्सेल निर्णय लेने की अनुमति देता है कि प्रतिक्रिया में कौन सी सामग्री लौटानी है (संभावित विधियों में सर्वर पर इमेज मास्क लेयर्स, डेटाबेस क्वेरीज़ या कॉन्फ़िगरेशन फ़ाइलों का उपयोग करना सम्मिलित है)। | ||
इस प्रकार के सर्वर-साइड | इस प्रकार के सर्वर-साइड इमेज मैप के लिए एचटीएमएल कोड के लिए <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> | ||
जब | जब यूजर इमेज के अंदर क्लिक करता है तो ब्राउज़र 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> का समर्थन नहीं करता हैतो क्वेरी स्ट्रिंग को एंकर यूआरएल में नहीं जोड़ा जाना चाहिए और सर्वर को उचित रूप से प्रतिक्रिया देनी चाहिए (उदाहरण के लिए, केवल-पाठ नेविगेशन पृष्ठ लौटाकर)। | ||
==क्लाइंट-साइड== | ==क्लाइंट-साइड== | ||
क्लाइंट-साइड | '''क्लाइंट-साइड इमेज मैप''' एचटीएमएल 3.2 में प्रस्तुत किए गए थे, और सर्वर पर निष्पादित करने के लिए किसी विशेष तर्क की आवश्यकता नहीं होती है (वे पूर्ण रूप से क्लाइंट-साइड हैं)। उन्हें किसी [[जावास्क्रिप्ट]] की भी आवश्यकता नहीं है। | ||
=== | ===स्पष्ट एचटीएमएल === | ||
एचटीएमएल में क्लाइंट-साइड इमेज मैप में दो भाग होते हैं: | |||
# वास्तविक | # वास्तविक इमेज, जो <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><area></code | <code><area></code> तत्व आयताकार (<code>shape="rect"</code>), बहुभुज (<code>shape="poly"</code>) या वृत्त (<code>shape="circle"</code>)हो सकते हैं। आकार-मान निर्देशांक-जोड़े हैं। | ||
आकार-मान निर्देशांक-जोड़े हैं। प्रत्येक जोड़ी में | प्रत्येक जोड़ी में X और Y मान होता है (इमेज के बाएं/ऊपर से) और इसे अल्पविराम से अलग किया जाता है। | ||
* आयत: चार निर्देशांक | * आयत: चार निर्देशांक: x1,y1,x2,y2 सेट करें। | ||
* बहुभुज: जितने चाहें उतने निर्देशांक | * बहुभुज: जितने चाहें उतने निर्देशांक (दो का गुणज): x1,y1,x2,y2, [...] xn,yn सेट करें। | ||
* वृत्त: निर्देशांक-युग्म और त्रिज्या के साथ | * वृत्त: निर्देशांक-युग्म और दूसरा मान त्रिज्या के साथ: x1,y1,त्रिज्या होता है। | ||
निम्नलिखित उदाहरण | निम्नलिखित उदाहरण आयताकार क्षेत्र (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 40: | Line 40: | ||
[[सीएसएस|'''सीएसएस''']] | [[सीएसएस|'''सीएसएस''']] | ||
सीएसएस निरपेक्ष स्थिति का उपयोग करके | सीएसएस निरपेक्ष स्थिति का उपयोग करके इमेज पर लिंक को ओवरले करना अधिक आधुनिक दृष्टिकोण है; चूँकि, यह केवल आयताकार क्लिक करने योग्य क्षेत्रों का समर्थन करता है। यह सीएसएस प्रौद्योगिकी [[आईफ़ोन]] पर इमेज मैप को ठीक से कार्य करने के लिए उपयुक्त हो सकती है, जो स्पष्ट एचटीएमएल इमेज मैपों को उचित रूप से पुन: स्केल करने में विफल हो सकती है। | ||
==निर्माण एवं उपयोग== | ==निर्माण एवं उपयोग== | ||
टेक्स्ट एडिटर का उपयोग करके हाथ से क्लाइंट-साइड इमेज मैप बनाना संभव है, किन्तु ऐसा करने के लिए वेब डिज़ाइनरों को यह जानना आवश्यक है कि एचटीएमएल को कैसे कोड किया जाए और साथ ही उन क्षेत्रों के निर्देशांक की गणना कैसे की जाए जिन्हें वे इमेज पर रखना चाहते हैं। परिणामस्वरूप, हाथ से कोड किए गए अधिकांश इमेज मैप सरल बहुभुज होते हैं। | |||
क्योंकि टेक्स्ट एडिटर में इमेज मैप बनाने के लिए अधिक समय और प्रयास की आवश्यकता होती है, इसलिए वेब डिजाइनरों को इमेज मैप शीघ्रता और सरलता से बनाने की अनुमति देने के लिए कई एप्लिकेशन डिज़ाइन किए गए हैं, जैसे [[वेक्टर ग्राफ़िक्स संपादक]] में आकार बनाते हैं। इन अनुप्रयोगों के उदाहरण एडोब के[[ 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 78: | 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> को जोड़ने के लिए अपने स्वयं की प्रणाली प्रदान करता है एसवीजी प्रारूप में वेक्टर इमेजयों के साथ कार्य करते समय पारंपरिक इमेज मैप प्रौद्योगिकी सामान्यतः आवश्यक नहीं होती हैं। | ||
== यह भी देखें == | == यह भी देखें == | ||
* | * मिस्ट्री मीट नेविगेशन | ||
==संदर्भ== | ==संदर्भ== | ||
{{reflist}} | {{reflist}} | ||
[[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 में प्रस्तुत किए गए थे, और सर्वर पर निष्पादित करने के लिए किसी विशेष तर्क की आवश्यकता नहीं होती है (वे पूर्ण रूप से क्लाइंट-साइड हैं)। उन्हें किसी जावास्क्रिप्ट की भी आवश्यकता नहीं है।
स्पष्ट एचटीएमएल
एचटीएमएल में क्लाइंट-साइड इमेज मैप में दो भाग होते हैं:
- वास्तविक इमेज, जो
<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>
सीएसएस निरपेक्ष स्थिति का उपयोग करके इमेज पर लिंक को ओवरले करना अधिक आधुनिक दृष्टिकोण है; चूँकि, यह केवल आयताकार क्लिक करने योग्य क्षेत्रों का समर्थन करता है। यह सीएसएस प्रौद्योगिकी आईफ़ोन पर इमेज मैप को ठीक से कार्य करने के लिए उपयुक्त हो सकती है, जो स्पष्ट एचटीएमएल इमेज मैपों को उचित रूप से पुन: स्केल करने में विफल हो सकती है।
निर्माण एवं उपयोग
टेक्स्ट एडिटर का उपयोग करके हाथ से क्लाइंट-साइड इमेज मैप बनाना संभव है, किन्तु ऐसा करने के लिए वेब डिज़ाइनरों को यह जानना आवश्यक है कि एचटीएमएल को कैसे कोड किया जाए और साथ ही उन क्षेत्रों के निर्देशांक की गणना कैसे की जाए जिन्हें वे इमेज पर रखना चाहते हैं। परिणामस्वरूप, हाथ से कोड किए गए अधिकांश इमेज मैप सरल बहुभुज होते हैं।
क्योंकि टेक्स्ट एडिटर में इमेज मैप बनाने के लिए अधिक समय और प्रयास की आवश्यकता होती है, इसलिए वेब डिजाइनरों को इमेज मैप शीघ्रता और सरलता से बनाने की अनुमति देने के लिए कई एप्लिकेशन डिज़ाइन किए गए हैं, जैसे वेक्टर ग्राफ़िक्स संपादक में आकार बनाते हैं। इन अनुप्रयोगों के उदाहरण एडोब के ड्रीमवीवर या 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.
