एचटीएमएल इमेज मैप्स

यह पोस्ट आपको सिखाएगी:

• HTML इमेज मैप्स क्या हैं?
• HTML डॉक्यूमेंट में इमेज मैप्स कैसे बनाएं?
• दूसरे पेज से लिंक्ड इमेज मैप कैसे बनाएं?

HTML इमेज मैप्स क्या हैं?

इमेज मैप उन क्षेत्रों के साथ एक तस्वीर है जिसे क्लिक किया जा सकता है। HTML में इमेज मैप बनाने के लिए, “ <नक्शा> ”तत्व का उपयोग किया जाता है। इसके अलावा, एक या अधिक ' <क्षेत्र> 'टैग क्षेत्रों को निर्दिष्ट करने के लिए' <मानचित्र> 'तत्व के भीतर जोड़े जाते हैं।

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

HTML दस्तावेज़ में छवि मानचित्र निर्दिष्ट करने के लिए सिंटैक्स का उल्लेख नीचे किया गया है:

' ” तत्व को निम्नलिखित विशेषताओं के साथ परिभाषित किया गया है:

• ' स्रोत 'छवि पथ निर्दिष्ट करता है।
• ' सब कुछ ” एक वैकल्पिक पाठ दिखाता है जब कोई छवि लोड नहीं हो सकती।
• ' usemap ” छवि क्षेत्रों को क्लिक करने योग्य बनाने के लिए निर्दिष्ट किया गया है। एक लिंक बनाने के लिए, इसका मान '<मानचित्र>' तत्व के वर्ग या आईडी के समान होना चाहिए।

' <नक्शा> ”तत्व निम्नलिखित विशेषताओं के साथ जोड़ा गया है:

• ' आकार 'एक HTML के क्षेत्र आकार को निर्दिष्ट करता है' <नक्शा> ' तत्व।
• ' COORDINATES विशेषता क्लिक करने योग्य क्षेत्र के निर्देशांक को परिभाषित करती है।
• ' href ” विशेषता स्रोत का URL निर्धारित करती है।

HTML डॉक्यूमेंट में इमेज मैप्स कैसे बनाएं?

HTML दस्तावेज़ में छवि मानचित्र बनाने के लिए, दिए गए निर्देशों को देखें:

• HTML में, 'जोड़ें' <दिव> 'तत्व, और एक वर्ग असाइन करें' छवि नक्शा ”।
• इस div के भीतर, 'जोड़ें' ” उपरोक्त चर्चा की गई विशेषताओं से जुड़ी एक छवि जोड़ने के लिए तत्व।
• फिर, एक HTML जोड़ें ' <नक्शा> 'तत्व और इसे असाइन करें' क्लिकस्पेस ' नाम।
• ध्यान दें कि ' usemap 'विशेषता को नाम दिया गया है' #क्लिकस्पेस 'की ओर इशारा करते हुए' नाम '
• इसके अंदर, 'जोड़ें' <क्षेत्र> ” ऊपर बताई गई विशेषताओं के साथ टैग करें:

छवि के आकार को समायोजित करने के लिए CSS अनुभाग की ओर बढ़ते हैं।

शैली '

' सीएसएस में

का उपयोग करें छवि-नक्शा 'कक्षा का उपयोग करने के लिए' <दिव> ”तत्व और निम्नलिखित सीएसएस गुणों को लागू करें:

यहाँ उल्लेखित CSS गुणों का विवरण दिया गया है:

• ' चौड़ाई ' संपत्ति div तत्व की चौड़ाई निर्धारित करती है।
• ' अंतर ” संपत्ति तत्व के चारों ओर अधिक जगह जोड़ती है।

शैली 'आईएमजी' तत्व

देखें, क्षेत्र में निर्दिष्ट निर्देशांक ' COORDINATES विशेषता अब क्लिक करने योग्य हैं:

अगले भाग में, हम सीखेंगे कि छवि मानचित्र को दूसरे स्रोत से कैसे जोड़ा जाए।

दूसरे पेज से लिंक्ड इमेज मैप कैसे बनाएं?

एक्सटेंशन के साथ एक और HTML पेज बनाएं ” .html ”नीचे बताए गए चरणों का पालन करके:

• हमारे मामले में, हम इसे नाम देते हैं ' लैपटॉप.html ”।
• एक div तत्व जोड़ें और इसे एक वर्ग असाइन करें ' लैपटॉप-आईएमजी ”।
• फिर, 'का उपयोग करके एक छवि लगाएं' 'तत्व और संबद्ध करें' स्रोत ' और ' चौड़ाई ' गुण।
• अगला, 'का उपयोग करके एक पैराग्राफ निर्दिष्ट करें

  ' तत्व:

CSS में, निम्नलिखित CSS गुण निर्दिष्ट करें “ लैपटॉप-आईएमजी ' कक्षा:

उत्पादन

अब, हम लिंक करेंगे ' लैपटॉप.html 'पृष्ठ एक छवि के लिए' <क्षेत्र> 'पहले पृष्ठ का तत्व। ऐसा करने के लिए, पृष्ठ का URL निर्दिष्ट करें ' href '<क्षेत्र>' तत्व की विशेषता जैसा कि नीचे दिखाया गया है:

उत्पादन

हमने सफलतापूर्वक सीखा है कि छवि मानचित्र क्या हैं और वे अन्य स्रोतों से कैसे जुड़े हैं।

निष्कर्ष

एचटीएमएल ' <नक्शा> 'तत्व का उपयोग छवि मानचित्र या क्लिक करने योग्य क्षेत्रों वाली छवि बनाने के लिए किया जाता है। छवि के क्लिक करने योग्य क्षेत्रों को परिभाषित करने के लिए, एक या अधिक ' <क्षेत्र> ” टैग “