क्या HTML छवि मानचित्र अभी भी उपयोग किए जाते हैं?

Question

क्या लोग अभी भी पुराने HTML इमेज मैप का उपयोग करते हैं? जिनके साथ:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

या कोई नया, बेहतर विकल्प है?

Comments

जब आप पूछते हैं कि क्या कुछ बेहतर है या नहीं, तो आपको तुलना के लिए साधन देना चाहिए। किस तरीके से बेहतर है, या किस उद्देश्य के लिए? हमारे निपटान में छवि मानचित्रों की तुलना में अधिक शक्तिशाली उपकरण हैं, अधिक जटिल भी ...

— जेफ पार्कर

अच्छा बिंदु - मैंने लंबे समय तक एक छवि मानचित्र का उपयोग नहीं किया है और सोचा कि कोडिंग की एक बेहतर विधि द्वारा इसे उलट दिया गया है।

— ss888

जावास्क्रिप्ट / परत आधारित कार्यक्षमता, और फ्लैश ने मेरे द्वारा आने वाली हर चीज के बारे में छवि मानचित्रों को बदल दिया है ... मुझे आखिरी बार याद नहीं है कि मैंने सक्रिय ड्यूटी में एक को देखा था। यदि आपके पास एक विशिष्ट उद्देश्य है, हालांकि, एक अधिक विशिष्ट उत्तर अधिक आसानी से उपलब्ध हो सकता है :)

— जेफ़ पार्कर

मैं बजाय इस दिन और उम्र के लोल में फ्लैश से बचना चाहता था।

— ss888

यदि आप जल्दी करने के लिए कुछ करने के लिए देख रहे हैं, तेजी से चलाने के लिए, और केवल हल्के से बुराई, छवि नक्शे काम करेंगे। कोई व्यापक रूप से समर्थित प्रतिस्थापन नहीं है जो मेरे दिमाग में समान गति से काम करेगा। अब यदि आपके पास एसवीजी, कैनवस के लिए समय है, और आईई को आपकी समर्थित ब्राउज़र सूची से बाहर करने में कोई आपत्ति नहीं है ...

— जेफ पार्कर

Answer 1

हां, लोग अभी भी छवि मानचित्र का उपयोग करते हैं। एक विकल्प पूर्ण स्थिति और सीएसएस का उपयोग करने वाले तत्वों की स्थिति के लिए होगा लेकिन यह बेहतर नहीं है। यह आपको छवि मानचित्रों की तरह आकार देने की अनुमति नहीं देता है

Comments

ठीक है, तो html छवि नक्शे अभी भी अच्छे हैं? होवर / रोलओवर प्रभाव जोड़ने के बारे में कैसे?

— ss888

छवि मानचित्रों के साथ मेरा प्रमुख मुद्दा यह है कि छवियों के विपरीत वे अपने साथ जोड़ते हैं जो ब्राउज़र या स्क्रीन आकार के पैमाने पर नहीं होते हैं। मुझे उम्मीद है कि ओपी एसवीजी प्रारूपों पर शोध करेगा

— मार्टिन

आपको छवि के आकार के साथ इसे स्केल करना होगा। अपनी छवि का आकार खिड़की के आकार के सापेक्ष बनाना। फिर छवि चौड़ाई के अनुपात में हमेशा उस चौड़ाई / ऊंचाई के अनुपात की तुलना करना और फिर निर्देशांक को अधिलेखित करने के लिए जावास्क्रिप्ट का उपयोग करना। Jquery आधारित छवि आकार घटना हैंडलर $ (विंडो) है .resize (फ़ंक्शन () {.... yourcode ...});

— स्किडडॉन

Answer 2

वे HTML5 विनिर्देश में हैं , इसलिए वे पदावनत नहीं होंगे।

आप अभी भी स्वतंत्र रूप से उनका उपयोग कर सकते हैं, वे निश्चित रूप से अभी भी वेब विकास में अपना स्थान रखते हैं। या मैं कह सकता हूं, वे दुर्लभ अवसर मौजूद हैं जहां आप किसी छवि मानचित्र के साथ कुछ हल कर सकते हैं।

Answer 3

CSS या छवि मानचित्रों का उपयोग करने का एक वैकल्पिक समाधान HTML डोम में एम्बेडेड SVG ग्राफिक्स का उपयोग करना होगा।

इस तकनीक का उपयोग करके माउसओवर प्रभाव को प्राप्त करने के तरीके पर एक ट्यूटोरियल इस ट्यूटोरियल में वर्णित है: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

प्रमुख बात यह है कि एसवीजी तत्व ऑनमेसओवर और ऑनमाउटआउट सहित पारंपरिक डोम ईवेंट को भी ट्रिगर करते हैं ।

Comments

+1 SVG इमेजमैप का सबसे अच्छा प्रत्यक्ष विकल्प है, क्योंकि इंटरैक्शन किसी भी मनमाने आकार के साथ हो सकता है। कुछ हद तक इमेजमाप्स के समान बनाया जा सकता है, जहां वेक्टर को-ऑर्डर्स एसवीजी एलिमेंट्स को इमेज फिल करके , रास्टर पिक्सेल इमेज को काटते हैं । लेकिन फिर भी, क्षेत्र के नक्शे कुछ मामलों में बेहतर हो सकते हैं (वे सरल हैं, और छवि को क्रॉप नहीं करते हैं, जो कभी-कभी वांछनीय हो सकता है)।

— user56reinstatemonica8

Answer 4

हां HTML छवि मानचित्र अच्छे हैं खासकर यदि आप चाहते हैं कि आपका क्षेत्र बहुभुज हो। आप जावास्क्रिप्ट के साथ-साथ मानचित्रण में रोलओवर प्रभाव जोड़ सकते हैं। यहाँ एक अच्छा ट्यूटोरियल और डेमो है:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

Comments

+1 - जब आप सीएसएस और पूर्ण स्थिति के साथ बहुत कुछ कर सकते हैं, तो छवि मानचित्र अभी भी एक गैर-आयताकार बहुभुज क्षेत्र पर होवर का पता लगाने का एकमात्र तरीका है।

— ब्लेज़ेमॉन्गर

Answer 5

सभी ब्राउज़र द्वारा समर्थित HTML5 विनिर्देशों में छवि मानचित्र अभी भी हैं।

उन्हें jQuery RWD छवि मानचित्रों का उपयोग करके उत्तरदायी डिज़ाइन के लिए अनुकूलित किया जा सकता है: https://github.com/stowball/jQuery-rwdImageMaps

यह पता लगाता है और स्वचालित रूप से छवि मानचित्र निर्देशांक का आकार बदल देता है।

यह प्लगइन के रूप में वर्डप्रेस डेवलपर्स के लिए भी उपलब्ध है: http://wordpress.org/plugins/responsive-image-maps/

सरल और प्रभावी उपाय।

Answer 6

हां, मैं अभी भी इमेज मैप्स का उपयोग करता हूं, हालांकि मेरी आखिरी परियोजना में रैपेल का इस्तेमाल किया गया था। कुछ हासिल करना और चलाना बहुत आसान था।

http://dmitrybaranovskiy.github.io/raphael/

उनकी वेब साइट से:

Raphaël ['ræfeɪəl] एसवीजी डब्ल्यू 3 सी सिफारिश और ग्राफिक्स बनाने के लिए आधार के रूप में वीएमएल का उपयोग करता है। इसका मतलब यह है कि आपके द्वारा बनाई गई प्रत्येक चित्रमय वस्तु भी एक DOM ऑब्जेक्ट है, इसलिए आप जावास्क्रिप्ट ईवेंट हैंडलर संलग्न कर सकते हैं या बाद में उन्हें संशोधित कर सकते हैं। रापाल का लक्ष्य एक एडाप्टर प्रदान करना है जो ड्राइंग वेक्टर आर्ट को संगत क्रॉस-ब्राउज़र और आसान बना देगा।

अच्छा सरल छवि मानचित्र उदाहरण:

http://dmitrybaranovskiy.github.io/raphael/australia.html

Comments

यह आपको कराहने और नीचा दिखाने के बजाय खुद को लिंक ठीक करने के लिए ज्यादा नहीं लेगा :(

— डेविड न्यूकॉम्ब

प्रिय डेविड, मैंने नीच को हटा दिया। आप मुझे लिंक को कैसे ठीक करना चाहते हैं जो अभी-अभी टूटा है? मैं http://raphaeljs.com/पूरी तरह से निकाल दूंगा और केवल गितुब का उदाहरण दूंगा।

— Orchichiro

स्टैक-साइटों का बिंदु सहयोग है। यदि आपको एक टूटी हुई कड़ी दिखाई देती है तो आप इसे ठीक कर सकते हैं। टूटे लिंक के संदर्भ में इसके बारे में मत सोचो, वे संसाधनों के लिए टूटे हुए बिंदु हैं। यदि संसाधन स्थानांतरित हो गया है, तो लिंक को अपडेट करें ताकि यह संसाधन के नए स्थान को इंगित करे: यह महत्वपूर्ण बात है। रफएलज की खुद की साइट हुआ करती थी लेकिन यह स्पष्ट रूप से गिटहब में स्थानांतरित हो गया है। क्या हम यह पता लगाने के लिए लोगों को Google पर वापस भेजते हैं कि वह अब कहां रहता है? या हम उन्हें यहाँ से जाने में मदद करते हैं? ऑस्ट्रेलिया का उदाहरण वही उदाहरण है जो बस कहीं अलग रहता है।

— डेविड न्यूकॉम्ब

http://raphaeljs.com/लिंक अंततः टूट जाएगा जब डोमेन पंजीकरण की समय सीमा समाप्त लेकिन वहाँ एक फिर से सीधा उस पर अब हर कोई अपने लिंक अद्यतन करने के लिए एक मौका देने के लिए (दुनिया में) है। शायद @orschiro आप लेख में एक के साथ शुरू कर सकते हैं और एसओ में सहयोगी प्रयास यहाँ जोड़ सकते हैं।

— डेविड न्यूकॉम्ब

समझ गए, धन्यवाद डेविड! मैंने उत्तर को अपडेट किया और लिंक को ठीक किया। :-)

— ऑर्किरो

Answer 7

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

** मुझे पता है कि यह धागा पुराना है, मैं हाल ही में ईमेल अभियान के मुद्दे के लिए इस पर कुछ अतिरिक्त शोध कर रहा था और सोचा कि यह किसी और को लाइन में मदद कर सकता है।

तीसरा पक्ष संपादित

इमेज मैप सपोर्ट पर litmus.com पर सवाल 04/2014 से है

इमेज मैप्स ALT टैग्स का समर्थन नहीं करते हैं, जब छवियों को लोड नहीं किया जाता है तो एएलटी टेक्स्ट कुछ क्लाइंट्स में प्रदर्शित नहीं होता है।

छवि मानचित्र का उपयोग आम तौर पर बड़ी छवियों का उपयोग करने के परिणामस्वरूप होता है जो वितरण की समस्या और बाधा डाउनलोड गति (विशेष रूप से मोबाइल उपयोगकर्ताओं के लिए महत्वपूर्ण) का कारण बन सकता है।

और सबसे महत्वपूर्ण बात यह है कि आईओएस (आईफोन / आईपैड) इमेज मैप लिंक को समन्वयित नहीं करता है जब छवि को स्केल किया जाता है जो लिंक को तोड़ता है। चूंकि iOS बड़ी संख्या में ईमेल खोलता है (iPhone + iPad = 38% http://emailclientmarketshare.com/ के माध्यम से ) यह महत्वपूर्ण है।

Answer 8

हाँ, यह अभी भी इस्तेमाल किया

एक छवि मानचित्र किसी उपयोगकर्ता को एक छवि के विभिन्न हिस्सों पर क्लिक करके कई पृष्ठों पर हाइपरलिंक करने की अनुमति देता है। छवि मानचित्र का उपयोग करके हम समान छवि के एक विशिष्ट क्षेत्र से संबंधित निर्देशांक की सूची बनाते हैं और हाइपरलिंक को एक अलग स्थान देते हैं। एक छवि के भीतर इसका उपयोग करके हम कई लिंक देते हैं।

अधिक

Answer 9

html और html5 में इमेज मैप काफी दिलचस्प विकल्प है जिसका वे अभी भी उपयोग कर रहे हैं और मैं व्यक्तिगत रूप से इसे प्यार करता हूं इसलिए मुझे लगता है कि मोबाइल उपकरणों में issuse है मेरा मुद्दा स्केलिंग से संबंधित है

हाँ, मुझे इसका अनुभव है, लेकिन मैं html html5 में नामांकित एक छात्र हूँ और भिखारियों के लिए मैं w3chools लिंक का अनुसरण करना चाहूँगा

http://www.w3schools.com/html/html_images.asp

आपको इस [पृष्ठ] से बहुत कुछ मिलेगा