माउस से एक छवि मानचित्र बनाएं. HTML में एक छवि मानचित्र बनाना html में नेविगेशन मानचित्र

टैग एक आवश्यक src विशेषता है, जिसका मान छवि का निरपेक्ष या सापेक्ष पथ है:

टैग के लिए निम्नलिखित विशेषताएँ उपलब्ध हैं:

गुण	विवरण, स्वीकृत मूल्य
वैकल्पिक	Alt विशेषता जुड़ती है वैकल्पिक पाठछवि के लिए. प्रदर्शित होता है जहां छवि लोड होने से पहले दिखाई देती है या जब ग्राफिक्स अक्षम होते हैं, और छवि पर माउस घुमाने पर टूलटिप के रूप में भी प्रदर्शित होता है। सिंटैक्स: alt='छवि विवरण" . !}
क्रॉसऑरिजिन	क्रॉसऑरिजिन विशेषता आपको CORS अनुरोधों का उपयोग करके किसी अन्य डोमेन पर संसाधनों से छवियां लोड करने की अनुमति देती है। CORS अनुरोधों का उपयोग करके कैनवास में लोड की गई छवियों का पुन: उपयोग किया जा सकता है। अनुमत मान: अनाम - क्रॉस-ओरिजिन अनुरोध HTTP हेडर का उपयोग करके किया जाता है, और कोई क्रेडेंशियल प्रसारित नहीं किया जाता है। यदि सर्वर उस सर्वर को क्रेडेंशियल प्रदान नहीं करता है जिससे सामग्री का अनुरोध किया गया है, तो छवि दूषित हो जाएगी और इसका उपयोग सीमित हो जाएगा। उपयोग-क्रेडेंशियल्स - क्रॉस-ओरिजिन अनुरोध क्रेडेंशियल्स पास करके किया जाता है। सिंटैक्स: क्रॉसऑरिजिन = "गुमनाम"।
ऊंचाई	ऊँचाई विशेषता px में छवि की ऊँचाई निर्दिष्ट करती है। सिंटैक्स: ऊँचाई = "300"।
ismap	इसमैप विशेषता इंगित करती है कि चित्र सर्वर पर स्थित मानचित्र छवि का हिस्सा है (मानचित्र छवि क्लिक करने योग्य क्षेत्रों वाली एक छवि है)। जब आप मानचित्र छवि पर क्लिक करते हैं, तो निर्देशांक यूआरएल क्वेरी स्ट्रिंग के रूप में सर्वर पर भेजे जाते हैं। Ismap विशेषता की अनुमति केवल तभी है जब तत्व तत्व का वंशज है वैध href विशेषता के साथ। सिंटैक्स: इसमैप.
longdesc	एक विस्तारित छवि विवरण URL जो ऑल्ट विशेषता का पूरक है। सिंटैक्स: longdesc='http://www.example.com/description.txt'.
स्रोत	Src विशेषता छवि का पथ निर्दिष्ट करती है। सिंटैक्स: src='फूल.jpg'।
आकार	प्रदर्शन विकल्पों के आधार पर छवि का आकार निर्धारित करता है। केवल तभी काम करता है जब srcset विशेषता निर्दिष्ट की जाती है। विशेषता मान एक या अधिक स्ट्रिंग है, जो अल्पविराम द्वारा अलग की जाती है।
srcset	छवि स्रोतों की एक सूची बनाता है जिन्हें स्क्रीन रिज़ॉल्यूशन के आधार पर चुना जाएगा। src विशेषता के साथ या उसके स्थान पर एक साथ उपयोग किया जा सकता है। विशेषता मान एक या अधिक स्ट्रिंग है, जो अल्पविराम द्वारा अलग की जाती है।
मानचित्र का उपयोग करें	यूज़मैप विशेषता छवि को छवि मानचित्र के रूप में निर्दिष्ट करती है। मान # चिह्न से प्रारंभ होना चाहिए. मान टैग के नाम या आईडी विशेषता के मान से संबद्ध है
चौड़ाई	चौड़ाई विशेषता px में छवि की चौड़ाई निर्दिष्ट करती है। सिंटैक्स: width='500'.

1.1. छवि पता

छवि पता पूर्ण (पूर्ण URL) में निर्दिष्ट किया जा सकता है, उदाहरण के लिए:
यूआरएल(http://anysite.ru/images/anyphoto.png)

या किसी सापेक्ष पथ के माध्यम से दस्तावेज़या मूल निर्देशिकावेबसाइट:
url(../images/anyphoto.png) - दस्तावेज़ से सापेक्ष पथ,
url(/images/anyphoto.png) - रूट निर्देशिका से सापेक्ष पथ।

इसकी व्याख्या इस प्रकार की गई है:
../ - का अर्थ है एक स्तर ऊपर जाना, मूल निर्देशिका तक,
छवियाँ/ - छवियों वाले फ़ोल्डर में जाएँ,
Anyphoto.png - एक छवि फ़ाइल की ओर इंगित करता है।

1.2. छवि आयाम

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

1.3. ग्राफ़िक फ़ाइल स्वरूप

जेपीईजी प्रारूप (फ़ोटोग्राफ़ी संबंधी विशेषज्ञों का संयुक्त समूह). JPEG छवियाँ तस्वीरों के लिए आदर्श हैं और इनमें लाखों अलग-अलग रंग हो सकते हैं। छवियां GIF की तुलना में बेहतर संपीड़ित होती हैं, लेकिन टेक्स्ट और ठोस रंग के बड़े क्षेत्र धब्बेदार हो सकते हैं।

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

पीएनजी प्रारूप (पोर्टेबल नेटवर्क ग्राफ़िक्स). GIF और JPEG प्रारूपों की सर्वोत्तम सुविधाएँ शामिल हैं। इसमें 256 रंग शामिल हैं और छवियों को जीआईएफ फ़ाइल की तुलना में छोटे आकार में संपीड़ित करते हुए, रंगों में से एक को पारदर्शी बनाना संभव बनाता है।

एपीएनजी प्रारूप (एनिमेटेड पोर्टेबल नेटवर्क ग्राफ़िक्स). पीएनजी प्रारूप पर आधारित एक छवि प्रारूप। आपको एनिमेशन संग्रहीत करने की अनुमति देता है और पारदर्शिता का भी समर्थन करता है।

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

बीएमपी प्रारूप (बिटमैप चित्र). यह एक असम्पीडित (मूल) रेखापुंज छवि है जिसका टेम्पलेट पिक्सेल का एक आयताकार ग्रिड है। बिटमैप फ़ाइल में एक हेडर, एक पैलेट और ग्राफ़िक डेटा होता है। हेडर ग्राफिक छवि और फ़ाइल (पिक्सेल गहराई, ऊंचाई, चौड़ाई और रंगों की संख्या) के बारे में जानकारी संग्रहीत करता है। पैलेट केवल उन बिटमैप फ़ाइलों में इंगित किया जाता है जिनमें पैलेट छवियां (8 या कम बिट्स) होती हैं और 256 से अधिक तत्व नहीं होते हैं। ग्राफ़िक डेटा चित्र का ही प्रतिनिधित्व करता है. इस प्रारूप में रंग की गहराई 1, 2, 4, 8, 16, 24, 32, 48 बिट प्रति पिक्सेल हो सकती है।

आईसीओ प्रारूप (विंडोज़ आइकन). माइक्रोसॉफ्ट विंडोज़ में फ़ाइल आइकन भंडारण प्रारूप। इसके अलावा, विंडोज आइकन का उपयोग इंटरनेट पर वेबसाइटों पर एक आइकन के रूप में किया जाता है। यह इस प्रारूप की एक तस्वीर है जो ब्राउज़र में वेबसाइट पते या बुकमार्क के बगल में प्रदर्शित होती है। एक ICO फ़ाइल में एक या अधिक आइकन होते हैं, जिनमें से प्रत्येक का आकार और रंग अलग-अलग सेट किया जा सकता है। आइकन का आकार कोई भी हो सकता है, लेकिन सबसे आम 16, 32 और 48 पिक्सेल के किनारों वाले वर्गाकार आइकन हैं।

2. टैग

टैग

टैग में एक नाम विशेषता उपलब्ध है, जो मानचित्र का नाम निर्दिष्ट करती है। टैग के लिए नाम विशेषता का मान

तत्व

3. टैग

टैग क्लाइंट-साइड छवि मानचित्र के भाग के रूप में केवल एक सक्रिय क्षेत्र का वर्णन करता है। तत्व में कोई समापन टैग नहीं है. यदि एक सक्रिय क्षेत्र दूसरे को ओवरलैप करता है, तो क्षेत्रों की सूची से पहला लिंक लागू किया जाएगा।

4. छवि मानचित्र बनाने का उदाहरण

1) मूल छवि को वांछित आकार के सक्रिय क्षेत्रों में चिह्नित करें। क्षेत्रों के निर्देशांक की गणना एक फोटो प्रोसेसिंग प्रोग्राम का उपयोग करके की जा सकती है, उदाहरण के लिए, एडोब फोटोशॉपया रँगना.

2) कार्ड का नाम टैग में जोड़कर सेट करें

Jpg" alt='flowers_foto" width="680" height="383" usemap="#flowers"> !}
चावल। 2. एक छवि मानचित्र बनाने का एक उदाहरण, जब आप फूल पर माउस कर्सर क्लिक करते हैं, तो आप विवरण वाले पृष्ठ पर जाते हैं

पेशेवरों

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

विपक्ष

• जब लिंक क्षेत्र का आकार जटिल होता है, तो HTML कोड की मात्रा बढ़ जाती है। समोच्च को सीधे खंडों के एक सेट द्वारा अनुमानित किया जाता है; ऐसे खंड के प्रत्येक बिंदु के लिए, दो निर्देशांक निर्दिष्ट किए जाने चाहिए, और ऐसे बिंदुओं की कुल संख्या काफी बड़ी हो सकती है।
• तदनुसार, निर्देशांक निर्दिष्ट करने की जटिलता बढ़ जाती है। इन्हें मैन्युअल रूप से निर्दिष्ट करना सुविधाजनक नहीं है, इसलिए आपको इसका उपयोग करना होगा विशेष कार्यक्रम, जो क्षेत्रों को दृश्य रूप से दिखाता है और आपको उन्हें संपादित करने की अनुमति देता है।
• छवि बदलते समय, उदाहरण के लिए, स्केल बढ़ाते समय, आपको सभी संदर्भ क्षेत्रों के निर्देशांक फिर से सेट करने होंगे।
• आप छवि कार्डों पर विभिन्न प्रभाव लागू नहीं कर सकते जो एक चित्र को टुकड़ों में काटते समय उपलब्ध होते हैं: रोलिंग प्रभाव, आंशिक एनीमेशन, तेजी से लोड करने के लिए चित्रों का व्यक्तिगत अनुकूलन।
• कोई स्पष्ट रूप से परिभाषित लिंक सीमाएँ नहीं हैं। इसलिए, इन सीमाओं को सीधे छवि में विभिन्न माध्यमों का उपयोग करके उजागर करना होगा। यदि किसी कारण से चित्र लोड नहीं होता है, तो लिंक के सेट को समझना बहुत समस्याग्रस्त हो जाता है।

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

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

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

उदाहरण 1: एक छवि मानचित्र बनाना

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

तत्व निम्नलिखित गुण हैं.

• आकार - सक्रिय क्षेत्र के आकार को परिभाषित करता है। आकृति वृत्त (वृत्त), आयत (आयत), बहुभुज (बहु) के रूप में हो सकती है।
• ऑल्ट - प्रत्येक क्षेत्र के लिए वैकल्पिक पाठ जोड़ता है। यह केवल लिंक के लिए एक टिप्पणी के रूप में कार्य करता है, क्योंकि यह स्क्रीन पर प्रदर्शित नहीं होता है। यदि href मौजूद है तो आवश्यक विशेषता।
• शीर्षक - जब आप किसी क्षेत्र पर होवर करते हैं तो एक टूलटिप प्रदर्शित करता है।
• href - जाने वाले दस्तावेज़ का पता निर्दिष्ट करता है; इसका प्रभाव समान तत्व विशेषता के समान है .
• निर्देशांक - सक्रिय क्षेत्र के निर्देशांक निर्धारित करता है। निर्देशांक बाईं ओर से पिक्सेल में गिने जाते हैं शीर्ष कोनाछवि, जो मान 0, 0 से मेल खाती है। पहला नंबर क्षैतिज निर्देशांक है, दूसरा ऊर्ध्वाधर निर्देशांक है। निर्देशांकों की सूची क्षेत्र के आकार पर निर्भर करती है।

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

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

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

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

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

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

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

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

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

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

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

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