छवि मानचित्र संपादक के बिना छवि मानचित्र कैसे बनाएं

छवि मानचित्र बस सरल HTML टैग हैं

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

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

एक छवि मानचित्र बनाना

एक छवि मानचित्र बनाने के लिए, पहले एक छवि का चयन करें जो मानचित्र के आधार के रूप में कार्य करेगा। छवि "सामान्य आकार" होनी चाहिए -यह है, आपको इतनी बड़ी छवि का उपयोग नहीं करना चाहिए कि ब्राउजर इसे स्केल करेगा।

जब आप छवि डालते हैं, तो आप एक अतिरिक्त विशेषता जोड़ देंगे जो मानचित्र के निर्देशांक की पहचान करता है:

जब आप कोई छवि मानचित्र बनाते हैं, तो आप उस क्षेत्र को बना रहे हैं जो छवि पर क्लिक करने योग्य है, इसलिए मानचित्र के निर्देशांक आपके द्वारा चुने गए चित्र की ऊंचाई और चौड़ाई के साथ लाइन होना चाहिए। मानचित्र तीन अलग-अलग प्रकार के आकार का समर्थन करते हैं:

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

एक आयताकार के लिए , आप केवल ऊपरी बाएं और निचले दाएं कोनों को मानचित्रित करते हैं। सभी निर्देशांक एक्स, वाई (ओवर, अप) के रूप में सूचीबद्ध हैं। तो, ऊपरी बाएं कोने 0,0 और निचले दाएं कोने के लिए 10,15 आप 0,0,10,15 टाइप करेंगे । फिर आप इसे मानचित्र में शामिल करते हैं:

<क्षेत्र आकार = "rect" coords = "0,0,10,15" href = "morris.htm" alt = "मॉरिस">

बहुभुज के लिए , आप प्रत्येक एक्स, y को अलग से समन्वयित करते हैं। वेब ब्राउज़र स्वचालित रूप से निर्देशांक के अंतिम सेट को पहले से जोड़ता है; इन निर्देशांक के अंदर कुछ भी मानचित्र का हिस्सा है।

<क्षेत्र आकार = "पॉली" coords = "17,34,41,96,110,121" href = "garfield.htm" alt = "गारफील्ड">

सर्किल आकारों को केवल आयत की तरह दो निर्देशांक की आवश्यकता होती है, लेकिन दूसरे समन्वय के लिए, आप त्रिज्या या सर्कल के केंद्र से दूरी निर्दिष्ट करते हैं। तो, 122,122 पर केंद्र के साथ एक सर्कल और 5 की त्रिज्या के लिए आप 122,122,5 लिखेंगे:

<नक्शा नाम = "बेबीकैट्स"> <क्षेत्र आकार = "सर्क" coords = "122,122,5" href = "catbert.htm" alt = "कैटबर्ट">

सभी क्षेत्रों और आकारों को एक ही मानचित्र टैग में शामिल किया जा सकता है:

<क्षेत्र आकार = "rect" coords = "0,0,10,15" href = "morris.htm" alt = "मॉरिस"> <क्षेत्र आकार = "पॉली" coords = "17 , 34,41,96,110,121 "href =" garfield.htm "alt =" गारफील्ड "> <क्षेत्र आकार =" सर्क "coords =" 122,122,5 "href =" catbert.htm "alt =" कैटबर्ट ">

विचार

1 99 0 के दशक के शुरुआती 2000 के दशक में वेब मैप्स के वेब 1.0 युग में छवि मानचित्र अधिक आम थे-छवि मानचित्र अक्सर वेबसाइट की नेविगेशन का आधार बनाते थे। एक डिज़ाइनर मेनू आइटम इंगित करने के लिए कुछ प्रकार की तस्वीर बनाएगा, फिर मानचित्र सेट करें।

आधुनिक दृष्टिकोण एक पृष्ठ पर छवियों और हाइपरलिंक की नियुक्ति को नियंत्रित करने के लिए उत्तरदायी डिजाइन को प्रोत्साहित करते हैं और कैस्केडिंग स्टाइल शीट का उपयोग करते हैं।

हालांकि मानचित्र टैग अभी भी HTML मानक में समर्थित है, छोटे प्रारूप कारकों वाले मोबाइल उपकरणों का उपयोग छवि मानचित्रों के साथ अप्रत्याशित प्रदर्शन समस्याओं का कारण बन सकता है। इसके अलावा, बैंडविड्थ की समस्याएं या टूटी हुई छवियां छवि मानचित्र के मान को म्यूट करती हैं।

तो, इस स्थिर, अच्छी तरह से समझी गई तकनीक का उपयोग करना जारी रखें- यह जानकर कि वेब डिजाइनरों के साथ वर्तमान में प्रचलित विकल्प हैं।