नेविगेशन मानचित्र. छवि क्षेत्रों में लिंक बनाना: लिंक का मानचित्र ग्राफ़िक मानचित्र html

टैग

कंटेनर के अंदर

• एक या अधिक तत्व< >. इन तत्वों में कोई सामग्री नहीं है, लेकिन छवि मानचित्र के ज्यामितीय क्षेत्रों और प्रत्येक क्षेत्र से जुड़े हाइपरलिंक को परिभाषित करते हैं
• ब्लॉक स्तर की सामग्री. इस सामग्री में शामिल होना चाहिए< >, जो मानचित्र के ज्यामितीय क्षेत्रों और प्रत्येक क्षेत्र से जुड़े लिंक को निर्दिष्ट करता है

यदि टैग

यदि क्षेत्र ओवरलैप होते हैं, तो दस्तावेज़ में पहले दिखाई देने वाले क्षेत्र को परिभाषित करने वाले तत्व को प्राथमिकता दी जाती है।

एचटीएमएल: 3.2 | 4 / एक्सएचटीएमएल: 1.0 | 1.1

वाक्य - विन्यास

गुण

कक्षा	उपयोग की जाने वाली कक्षा का नाम परिभाषित करता है
डिर	पात्रों की दिशा निर्धारित करता है: लीटर - बाएँ से दाएँ आरटीएल - दाएँ से बाएँ
पहचान	अद्वितीय पहचानकर्ता
लैंग	प्रदर्शित दस्तावेज़ की भाषा को परिभाषित करता है
नाम	छवि कार्ड का नाम. टैग के यूज़मैप पैरामीटर के मान के रूप में उपयोग किया जाता है
धब्बे पर	तत्व फोकस खो देता है
क्लिक पर	किसी तत्व पर क्लिक करें
ondblclick	किसी तत्व पर डबल क्लिक करें
पर ध्यान केंद्रित	तत्व फोकस प्राप्त कर रहा है
ऑनकीडाउन	तत्व पर फोकस होने पर कुंजी दबाना
ऑनकीप्रेस	जब किसी तत्व पर फोकस हो तो कुंजी को दबाना और छोड़ना
onkeyup	जब तत्व पर फोकस हो तो पहले से दबाई गई कुंजी को जारी करना
onmousedown	किसी तत्व पर फोकस होने पर माउस बटन पर क्लिक करना
onmousemove	जब किसी तत्व पर फोकस होता है तो माउस पॉइंटर की गति
ऑनमाउसआउट	माउस पॉइंटर को किसी तत्व से दूर ले जाना
मूषक के ऊपर से	किसी तत्व पर माउस पॉइंटर रखना
onmouseup	किसी तत्व पर फोकस होने पर पहले से दबाए गए माउस बटन को छोड़ना
शैली	एक इनलाइन स्टाइल शीट निर्दिष्ट करता है
शीर्षक	टूलटिप

उदाहरण

• समापन टैग आवश्यक है ()
• आईडी विशेषता आवश्यक है
• उन मामलों के लिए ग्राफिक्स कार्ड के लिए एक टेक्स्ट विकल्प प्रदान करने की अनुशंसा की जाती है जहां ग्राफिक्स उपलब्ध नहीं हैं या उपयोगकर्ता उन्हें प्राप्त नहीं कर सकता है
• पुराने और वॉयस ब्राउज़र में खराब समर्थन के कारण, छवि मानचित्र को मुख्य नेविगेशन के रूप में उपयोग करने की अनुशंसा नहीं की जाती है

टैग - ब्लॉक स्तर का तत्व, अर्थात्। टैग की सामग्री हमेशा एक नई लाइन पर शुरू होती है। टैग के बाद एक लाइन ब्रेक भी जोड़ा जाता है।

व्लाद मर्ज़ेविच

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

क्लाइंट संस्करण में, मानचित्र छवि के लिंक के समान HTML दस्तावेज़ में स्थित है।

छवि मानचित्र का क्लाइंट संस्करण

यह इंगित करने के लिए कि एक छवि एक मानचित्र है, टैग के यूज़मैप विशेषता का उपयोग करें . मान कार्ड कॉन्फ़िगरेशन के विवरण का एक लिंक है।

उदाहरण 1: छवि मानचित्र का उपयोग करना

यूज़मैप विशेषता का उपयोग ब्राउज़र को यह इंगित करने के लिए किया जाता है कि छवि एक मानचित्र है। यह कार्ड कॉन्फ़िगरेशन के विवरण का एक लिंक है, जो टैग द्वारा निर्दिष्ट है

क्षेत्र टैग विशेषताएँ

आकार

सक्रिय क्षेत्र के आकार को परिभाषित करता है. आकृति वृत्त (वृत्त), आयत (आयत), बहुभुज (बहु) के रूप में हो सकती है।

वैकल्पिक

प्रत्येक क्षेत्र के लिए वैकल्पिक पाठ जोड़ता है। यह केवल लिंक के लिए एक टिप्पणी के रूप में कार्य करता है, क्योंकि यह स्क्रीन पर प्रदर्शित नहीं होता है।

तार

सक्रिय क्षेत्र के निर्देशांक सेट करता है. निर्देशांक छवि के ऊपरी बाएँ कोने से पिक्सेल में मापे जाते हैं, जो मान 0.0 से मेल खाता है। पहला अंक क्षैतिज निर्देशांक है, दूसरा ऊर्ध्वाधर निर्देशांक है। निर्देशांकों की सूची क्षेत्र के आकार पर निर्भर करती है।

एक वृत्त के लिए, तीन संख्याएँ निर्दिष्ट हैं - वृत्त के केंद्र और त्रिज्या के निर्देशांक।

एक आयत के लिए, ऊपरी बाएँ और निचले दाएँ कोने के निर्देशांक।

एक बहुभुज के लिए, उसके शीर्षों के निर्देशांक निर्दिष्ट होते हैं (चित्र 2)।

चावल। 2. बहुभुज के लिए बिंदुओं का समन्वय करें

href

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

छवि मानचित्र के लाभ

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

2. एक फ़ाइल के साथ काम करना अधिक सुविधाजनक है - आपको अलग-अलग टुकड़ों को जोड़ने के बारे में चिंता करने की ज़रूरत नहीं है और ड्राइंग को आसानी से सही जगह पर रखा जा सकता है।

कमियां

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

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

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

प्रयोज्य

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

मानचित्रों का मुख्य दोष यह है कि इनमें कड़ियों की स्पष्ट रूप से परिभाषित सीमाएँ नहीं होती हैं। इसलिए, छवि में पहले से मौजूद विभिन्न माध्यमों का उपयोग करके इन सीमाओं को उजागर करना होगा। यदि किसी कारण से चित्र लोड नहीं होता है, तो लिंक के सेट को समझना बहुत समस्याग्रस्त हो जाता है।

वैकल्पिक विकल्प

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

फ़्लैश का उपयोग करना

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

छवि स्लाइसिंग

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

सारांश

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

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

छवि मानचित्र को युग्मित टैग द्वारा परिभाषित किया गया है . एक HTML दस्तावेज़ में एकाधिक छवि मानचित्र हो सकते हैं, इसलिए प्रत्येक मानचित्र को एक अद्वितीय नाम दिया जाना चाहिए, जो विशेषता द्वारा निर्धारित किया जाता है नाम.

एक छवि मानचित्र में छवि क्षेत्र और उनके संबंधित लिंक होते हैं। छवि के एक अनुभाग का वर्णन करता है और उसे एक लिंक के रूप में एक टैग निर्दिष्ट करता है .

टैग विशेषताएँ

डिफ़ॉल्ट रूप से, निर्देशांक पिक्सेल में मापे जाते हैं।

निर्देशांक मूल स्क्रीन के ऊपरी बाएँ कोने में है, अर्थात।

छवि मानचित्र क्षेत्रों की विभिन्न आकृतियों के उदाहरण

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

किसी टैग में किसी छवि को मानचित्र के रूप में उपयोग करना आपको एक अतिरिक्त विशेषता दर्ज करनी होगी मानचित्र का उपयोग करें, जो छवि मानचित्र का नाम निर्दिष्ट करता है। इस नाम के पहले "#" चिन्ह लगा हुआ है।

छवि मानचित्र का उपयोग करने का उदाहरण

जब आप किसी दी गई छवि के विभिन्न क्षेत्रों पर क्लिक करते हैं, तो संबंधित टेक्स्ट का रंग बदल जाता है।

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

इस कार्य को पूरा करने के लिए, हम तथाकथित नेविगेशन मानचित्रों के बिना नहीं कर सकते।

मान लीजिए कि हमारे पास इस तरह की एक तस्वीर है:

और हमें ऐसा करने की आवश्यकता है ताकि उपयोगकर्ता, इन "बटनों" में से किसी एक पर क्लिक करके, इस या उस दस्तावेज़ के लिंक का अनुसरण कर सके.. इसके लिए हमें क्या चाहिए?

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

आइए अपने ड्राइंग/मानचित्र को नाम दें पैनल. यह इस तरह दिखेगा:

यूज़मैप='#पैनल'>

वाक्यविन्यास के नियमों के अनुसार चिन्ह लगाना न भूलें # नाम के आगे हैश का निशान..

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

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

)
आकार- ड्राइंग क्षेत्र का आकार जो संदर्भ के रूप में काम करेगा। इसके तीन अर्थ हो सकते हैं:

• रेक्ट- आयताकार क्षेत्र
• पाली- यह क्षेत्र एक प्रकार का बहुभुज है
• घेरा- एक वृत्त द्वारा परिभाषित क्षेत्र

तार- आकार निर्देशांक

आयताकार क्षेत्र

अब हमारा नक्शा इस तरह दिखता है:

दरअसल, अब "हरा" वर्गाकार बटन काम करने लगा है।

जैसा कि आप इस उदाहरण में इस पर क्लिक करके देख सकते हैं:

यूज़मैप='#पैनल'>

मैं वास्तव में जो लिखा गया था उसका सार समझाए बिना उदाहरण के साथ थोड़ा जल्दबाजी कर रहा था... आइए टैग विशेषताओं पर ध्यान दें .

href='प्राइमर1.html'- यहां मुझे लगता है कि यह स्पष्ट है, यह दस्तावेज़ का पथ है जो "हरे बटन" पर क्लिक करने पर खुल जाना चाहिए।

चूँकि हमारा बटन वर्गाकार है, और एक वर्ग, जैसा कि हम जानते हैं, एक "नियमित" आयत है, हम ड्राइंग क्षेत्र का आकार आयताकार में निर्दिष्ट करते हैं आकार='सही' .

और अब मज़ेदार हिस्सा कोर्डर्स='15,15,82,82'- निर्देशांक.. एक आयत के लिए, उन्हें "X1, Y1, X2, Y2" सिद्धांत के अनुसार दो बिंदुओं द्वारा निर्दिष्ट किया जाता है, जहां X1, Y1 पहला बिंदु है और, तदनुसार, X2, Y2 दूसरा है। निर्देशांक पिक्सेल में दर्शाए गए हैं। हमारे ड्राइंग/मानचित्र का आयाम 300 गुणा 100 पिक्सेल है, इसके सबसे ऊपरी बाएँ पिक्सेल में निर्देशांक X=0,Y=0 हैं, और सबसे निचले दाएँ पिक्सेल में निर्देशांक X=300,Y=100 हैं। यदि यह स्पष्ट नहीं है, तो आइए पाँचवीं कक्षा की ज्यामिति में गोता लगाएँ।

तस्वीर को जरा देखिए:

तो, एक आयताकार आकार का चयन आकार='सही'एक वर्गाकार बटन के रूप में हमारे क्षेत्र के लिए, हमने इसके ऊपरी बाएँ और निचले दाएँ पिक्सेल के निर्देशांक दर्शाए हैं... जो पूरे बटन के "कार्यशील" क्षेत्र को निर्दिष्ट करने के लिए काफी हैं।

बहुभुज (बहुभुज)।

आइए "पीले बटन" से निपटें, इसे एक त्रिकोण के रूप में दर्शाया गया है। अपने ड्राइंग से इसके "कार्य" क्षेत्र का चयन करने के लिए, हम विशेषता निर्दिष्ट करते हैं आकारअर्थ पाली- एक बहुभुज जो इस क्षेत्र को एक प्रकार के बहुभुज के रूप में परिभाषित करेगा, जहां अल्पविराम से अलग किए गए निर्देशांक इसके शीर्ष होंगे, उनमें से जितने चाहें उतने हो सकते हैं "X1,U1,X2,U2,X3,U3,X4, U4...X124,U124” कोनों के बिंदुओं और शीर्षों से बनी आकृति किसी भी बहुभुज की तरह दिख सकती है, नियमित और अनियमित दोनों। हमारे मामले में, केवल तीन कोण हैं, इसलिए यह एक त्रिभुज है, इसलिए इसके निर्देशांक मानों के तीन जोड़े "X1,Y1,X2,Y2,X3,Y3" द्वारा दिए जाएंगे।

तो हम सब कुछ एक साथ इस तरह लिखते हैं:

आकार = "पॉली" कोर्ड्स = "148,15,185,82,110,82">

और यहां एक तस्वीर है जो स्पष्ट रूप से दिखाती है कि बिंदुओं के निर्देशांक कहां से आते हैं।

घेरा

खैर, आखिरी "लाल बटन" गोल है... जिसका मतलब है कि क्षेत्र का आकार गोल होगा आकृति = "वृत्त". इस बार निर्देशांक को लेकर स्थिति थोड़ी अलग है. हमें तीन मानों X, Y, R की आवश्यकता होगी। X और Y हमारे वृत्त के केंद्र के निर्देशांक हैं, और R पिक्सेल में त्रिज्या की लंबाई है।

यहाँ चित्र है:

यहाँ एक उदाहरण है:

आइए इसे ध्यान में रखें..

अब थोड़ा इस बारे में कि हमारे मानचित्र को किसी भी पृष्ठ पर "माउंट" करने से पहले उसके साथ और क्या करना उचित होगा।

आइए हम चित्र-मानचित्र के निश्चित आयामों को विशेषताओं द्वारा परिभाषित करें चौड़ाईऔर ऊंचाई

आइए विशेषता का उपयोग करके संपूर्ण मानचित्र छवि और उसके अलग-अलग क्षेत्रों दोनों के लिए वैकल्पिक पाठ लिखें वैकल्पिक, साथ ही विशेषता वाले तत्वों का विवरण भी शीर्षक .

आइए बॉर्डर फ्रेम से छुटकारा पाएं...आइए इसे करें सीमा='0'..(ठीक है, अगर आपको यह बॉर्डर के साथ बेहतर लगता है, तो आपको ऐसा करने की ज़रूरत नहीं है.. मैं इस पर ज़ोर नहीं देता..)

अंत में इसे कुछ इस तरह दिखना चाहिए:

चौड़ाई='300' ऊंचाई='100' सीमा='0' alt='कंट्रोल पैनल" title="कंट्रोल पैनल"> !}

क्षेत्रों का प्रतिच्छेदन

कभी-कभी विभिन्न आकृतियों को "मिश्रण" करके किसी छवि का "कार्यशील" क्षेत्र बनाना सुविधाजनक होता है।

मान लीजिए कि हमारा अगला बटन इस तरह दिखता है:

बेशक, आप आकृति को बहुभुज के रूप में परिभाषित कर सकते हैं, लेकिन आपको ऐसे बटन के गोल भाग के लिए बहुत सारे निर्देशांक निर्दिष्ट करने होंगे (ठीक है, यदि आपको नेविगेशन मानचित्र में विशेष सटीकता की आवश्यकता है)।

इस उदाहरण में, आप दो आयताकार आकृतियों को परिभाषित कर सकते हैं रेक्टऔर घेरा घेराजैसा कि चित्र पर दिखाया गया है:

और कोड में उसी दस्तावेज़ का पथ इंगित करें:

"कोई क्षेत्र नहीं"

आइए एक उदाहरण देखें... मान लीजिए आपको इस तरह एक बटन बनाने की आवश्यकता है:

इसमें छेद के बारे में क्या?

टैग गुण के अलावा hrefमूल्य में विपरीत विशेषता है nohref- एक निष्क्रिय क्षेत्र, अर्थात, यदि उपयोगकर्ता ऐसे क्षेत्र पर क्लिक करता है, तो बिल्कुल कुछ नहीं होगा, जो कि हमें अपने मानचित्र में "छेद" बनाते समय वास्तव में हासिल करने की आवश्यकता है।

मानचित्र को दो क्षेत्रों, एक निष्क्रिय वृत्त द्वारा परिभाषित किया जाएगा घेराऔर सक्रिय आयताकार क्षेत्र रेक्टऔर जैसा कि चित्र में दिखाया गया है, निम्नलिखित निर्देशांक हैं:

जैसा कि पहले उल्लेख किया गया है, जब क्षेत्र प्रतिच्छेद करते हैं, तो सर्वोच्च प्राथमिकता उस क्षेत्र को दी जाएगी जो कोड में टैग के अंदर है पहले सूचीबद्ध

इसलिए, उदाहरण इस तरह दिखेगा:

सर्वर पर मानचित्र.

से अंश निर्देशिका (टैग विशेषताएँ ):

मानचित्र का उपयोग करें- छवि एक क्लाइंट-साइड नेविगेशन मानचित्र है।
ismap- छवि सर्वर पर एक नेविगेशन मानचित्र है।

अस्पष्ट? तो आइये पढ़ते हैं...

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

और यहाँ विशेषता है ismapटैग ब्राउज़र को बताता है कि सर्वर पर इस छवि के लिए एक नेविगेशन मानचित्र है, ठीक है, जहां आपने अपनी वेबसाइट पोस्ट की है या पोस्ट करने जा रहे हैं (लेख पढ़ें :)। और अब, जब कोई विज़िटर (क्लाइंट) ऐसी विशेषता के साथ चित्र के किसी भी क्षेत्र पर क्लिक करता है, तो ब्राउज़र इस क्लिक के निर्देशांक को याद रखेगा और उन्हें सर्वर पर भेज देगा, जहां एक विशेष प्रोग्राम इस डेटा को संसाधित करेगा और रीडायरेक्ट करेगा क्लाइंट ब्राउज़र से प्राप्त बिंदु के निर्देशांक के अनुसार, उपयोगकर्ता को सर्वर पर मानचित्र में दर्शाए गए पते पर भेजा जाता है।

इसे इस प्रकार लिखा गया है:

कहाँ किसी भी वेबसाइट पर नेविगेशन मानचित्र का पता.. एक सर्वर या किसी अन्य पर होस्ट किया गया..

तत्व का नाम विशेषता

टैग विशेषताएँ हम क्षेत्र के निर्देशांक (निर्देशांक विशेषता) और हमें आवश्यक आकार के प्रकार (आकार विशेषता) दोनों को इंगित करते हैं:

उपयोग उदाहरण

आइए एक उदाहरण देखें जिसमें जब आप एक चित्र में एक निश्चित आकृति पर क्लिक करते हैं, तो आप विभिन्न वेब पेजों पर जाते हैं जो इन आकृतियों का वर्णन करते हैं (विकिपीडिया के लिंक):

एक आकृति चुनें:

"चयन के लिए 4 आकार उपलब्ध हैं" >

और इसलिए क्रम में, हमने इस उदाहरण में क्या किया:

• एक छवि पोस्ट की (टैग) ), जिसे हम बाद में छवि मानचित्र बनाते समय उपयोग करेंगे। यूज़मैप विशेषता में, आपको उस मानचित्र छवि का नाम निर्दिष्ट करना होगा जिसे हम तत्व में उपयोग करेंगे
• मानचित्र छवि रखें (टैग
• चार टैग लगाएं , जो मानचित्र छवि में इंटरैक्टिव क्षेत्रों को परिभाषित करता है:
  • पहलाहम पुछते है आयताकार क्षेत्र(मूल्य "रेक्ट" के साथ आकार विशेषता), यह हमारे से मेल खाती है पहलाछवि ( पहले दोमान ऊपरी बाएँ कोने से मेल खाते हैं, निम्नलिखित दोमान ऊपरी और निचले दाएं कोने को निर्धारित करते हैं)।
  • दूसरासंकेत देना गोल क्षेत्र(मूल्य "सर्कल" के साथ आकार विशेषता), यह हमारे से मेल खाती है दूसराछवि ( पहलामान अक्ष निर्देशांक से मेल खाता है एक्स, और दूसरा अक्ष के अनुदिश य, तीसरा निर्धारित करता है RADIUS).
  • विषय में तिहाईऔर चौथा आंकड़ा, फिर उन्हें सिद्धांत के अनुसार संकलित किया जाता है बहुभुज क्षेत्र(मूल्य "पॉली" के साथ आकार विशेषता)। आप छवि में बिंदुओं की आवश्यक संख्या निर्धारित करते हैं, इन बिंदुओं (ग्राफ़िकल संपादक) के निर्देशांक की गणना करते हैं और उन्हें ऐसे क्रम में इंगित करते हैं कि ब्राउज़र उन्हें एक पंक्ति से जोड़ सके। उदाहरण के रूप में त्रिभुज का उपयोग करना (तीसरी तस्वीर): पहलाबिंदु (निर्देशांक) एक्सऔर यशिखर), दूसराबिंदु (निर्देशांक) एक्सऔर यनिचला बायां कोना) और तीसराबिंदु (निर्देशांक) एक्सऔर यनिचला दायां कोना)।

मैं आपका ध्यान इस तथ्य की ओर आकर्षित करता हूं कि यदि टैग में प्रैक्टिकल टास्क नंबर 26 है।

अति सूक्ष्म अंतर: व्यावहारिक कार्य की शुद्धता के लिए, मैं पहले बिंदु के रूप में तारे के शीर्ष का उपयोग करने और दक्षिणावर्त घूमने का सुझाव देता हूं। मैंने href विशेषता के मान के रूप में निर्दिष्ट किया है # इस मामले में यह एक प्लेसहोल्डर के रूप में कार्य करता है (आप एक ही पृष्ठ पर रहते हैं), आप किसी भी पृष्ठ पर संक्रमण कर सकते हैं।