कैसे जावास्क्रिप्ट का उपयोग करके एक छवि पर एक्स और वाई निर्देशांक ओवरले करें

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

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

आप कुछ CSS तकनीकों और JavaScript DOM अवधारणाओं का उपयोग करके HTML, CSS और JavaScript का उपयोग करके इस प्रभाव को प्राप्त कर सकते हैं।

छवियां किसी वेबपृष्ठ पर दृष्टिगत रूप से आकर्षक तरीके से जानकारी संप्रेषित करने का एक उपयोगी तरीका हो सकती हैं। वे अन्य आकर्षक प्रभाव जोड़ने के लिए भी उपयोगी होते हैं जैसे a सरल छवि गैलरी.

आप CSS और JavaScript का उपयोग करके HTML में किसी इमेज पर टूलटिप जोड़ सकते हैं।

इस प्रोजेक्ट में इस्तेमाल किया गया कोड इसमें उपलब्ध है गिटहब रेपो एक एमआईटी लाइसेंस के तहत।

1. index.html नामक एक नई फ़ाइल में, HTML फ़ाइल की मूल संरचना जोड़ें:

   एचटीएमएल>
   <एचटीएमएल>
   <सिर>
   <शीर्षक>छवि टूलटिप उदाहरणशीर्षक>
   सिर>
   <शरीर>
   शरीर>
   एचटीएमएल>

2. बॉडी टैग के अंदर, एक कंटेनर डिव जोड़ें। इस div में छवि और टूलटिप तत्व दोनों शामिल होंगे:

   <डिवकक्षा="कंटेनर">
   डिव>

3. कंटेनर के अंदर, एक छवि जोड़ें। सुनिश्चित करें कि मेल खाने वाले फ़ाइल नाम वाली छवि आपकी HTML फ़ाइल के समान फ़ोल्डर के अंदर है:

   <आईएमजीस्रोत="इमेज.जेपीजी"कक्षा="छवि"ऊंचाई="420"चौड़ाई="840"alt="आपकी छवि">

4. छवि के नीचे, टूलटिप का प्रतिनिधित्व करने के लिए एक div जोड़ें:

   <डिवकक्षा="टूलटिप">डिव>

5. हेड टैग में स्टाइल टैग जोड़ें। स्टाइल टैग के अंदर, इमेज कंटेनर और टूलटिप के लिए कुछ स्टाइल जोड़ें:

   <शैली>
   कंटेनर {
   पद: रिश्तेदार;
   दिखाना: इनलाइन-ब्लॉक;
    }
   
   .टूलटिप {
   पद: शुद्ध;
   बाएं: 0;
   दिखाना: कोई नहीं;
   गद्दी: 5पिक्सल;
   पृष्ठभूमि का रंग: #000;
   रंग: #फफ्फ;
   फ़ॉन्ट आकार: 12पिक्सल;
    }
   शैली>

6. बॉडी टैग के नीचे एक नया स्क्रिप्ट टैग बनाएं:

   <शरीर>
    आपकी वेबपेज सामग्री यहां 
   <लिखी हुई कहानी>
   लिखी हुई कहानी>
   शरीर>

7. स्क्रिप्ट टैग के अंदर, डोम चयनकर्ता का प्रयोग करें फ़ंक्शन, querySelector, छवि के HTML तत्व और टूलटिप प्राप्त करने के लिए:

   कॉन्स्ट छवि = दस्तावेज़क्वेरी चयनकर्ता ('।छवि');
   कॉन्स्ट टूलटिप = दस्तावेज़क्वेरी चयनकर्ता ('टूलटिप');

8. के लिए एक ईवेंट श्रोता जोड़ें माउस के ऊपर आयोजन। यह फ़ंक्शन तब चलेगा जब आप छवि पर माउस घुमाएंगे। जब ऐसा होता है, तो टूलटिप स्क्रीन पर प्रदर्शित होगी:

   image.addEventListener ('माउस के ऊपर', () => {
    टूलटिप.स्टाइल.डिस्प्ले = 'अवरोध पैदा करना';
   });

9. के लिए एक ईवेंट श्रोता जोड़ें माउसआउट आयोजन। यह फ़ंक्शन तब चलेगा जब माउस छवि को छोड़ देगा। जब ऐसा होता है, टूलटिप स्क्रीन से गायब हो जाएगा:

   image.addEventListener ('माउसआउट', () => {
    टूलटिप.स्टाइल.डिस्प्ले = 'कोई नहीं';
   });

10. किसी भी ब्राउज़र में index.html फ़ाइल खोलें, और टूलटिप देखने के लिए इमेज पर होवर करें:

छवि के एक्स और वाई पिक्सेल निर्देशांक की गणना और प्रदर्शन कैसे करें

अब जबकि टूलटिप पृष्ठ पर दिखाई दे रहा है, माउस के X और Y निर्देशांक प्रदर्शित करने के लिए इसकी स्थिति और इसके टेक्स्ट को बदलें।

1. टूलटिप की CSS स्टाइलिंग बदलें, ताकि इमेज पर होवर करने से पहले टूलटिप दिखाई न दे। यह आपको कर्सर के स्थान पर कूदने से पहले छवि के निचले भाग में टूलटिप को देखने से रोकता है:

   .टूलटिप {
   पद: शुद्ध;
   ऊपर: -30 पीएक्स;
   बाएं: 0;
   दिखाना: कोई नहीं;
   गद्दी: 5पिक्सल;
   पृष्ठभूमि का रंग: #000;
   रंग: #फफ्फ;
   फ़ॉन्ट आकार: 12पिक्सल;
   }

2. स्क्रिप्ट टैग के अंदर, सुनने के लिए एक अन्य ईवेंट श्रोता जोड़ें mousemove आयोजन। जब भी आपका माउस किसी नए पिक्सेल पर मँडराता है तो यह फ़ंक्शन लगातार निष्पादित होगा। इवेंट पैरामीटर जोड़ें, जो इसके बारे में जानकारी इनपुट करेगा mousemove समारोह में घटना। इस जानकारी में छवि निर्देशांक शामिल हैं जहां माउस उस बिंदु पर है:

   image.addEventListener ('मूसमोव', (ई) => {
   });

3. घटना का उपयोग करते हुए, बाईं सीएसएस संपत्ति का उपयोग करके टूलटिप की क्षैतिज स्थिति बदलें। हर बार जब माउस चलता है, तो यह मूल्य को कर्सर के एक्स निर्देशांक से मिलान करने के लिए अद्यतन करेगा, जो इसमें संग्रहीत है clientX चर:

   tooltip.style.left = e.clientX + 'पीएक्स';

4. शीर्ष सीएसएस संपत्ति का उपयोग करके टूलटिप की लंबवत स्थिति बदलें। ग्राहक वाई माउस के y निर्देशांक का प्रतिनिधित्व करता है। ऑफसेटहाइट संपत्ति में टूलटिप के अंदर कोई अतिरिक्त पैडिंग या बॉर्डर शामिल है। चूंकि आप टूलटिप को सीधे वहां नहीं चाहते हैं जहां कर्सर है, आप स्थिति से अतिरिक्त 10px हटा सकते हैं:

   tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'पीएक्स';

5. निर्देशांक प्रदर्शित करने के लिए टूलटिप की टेक्स्ट सामग्री बदलें:

   टूलटिप.टेक्स्ट सामग्री = `एक्स: ${e.offsetX}, वाई: ${e.offsetY}`;

6. किसी भी ब्राउज़र में index.html फ़ाइल खोलें, और अपडेट किए गए टूलटिप को देखने के लिए इमेज पर होवर करें:

अपने इंटरएक्टिव वेबपेज में प्रभाव जोड़ना

अब आप समझ गए हैं कि अपने वेबपेज पर एक छवि पर इंटरएक्टिव टूलटिप कैसे जोड़ें। आप अन्य दिलचस्प HTML प्रभावों के साथ प्रयोग करके अपने HTML और CSS कौशल को आगे बढ़ाना जारी रख सकते हैं।