इस अति-त्वरित ट्यूटोरियल में, आप सीखेंगे कि जब आपके उपयोगकर्ता किसी तत्व, जैसे छवि या लिंक पर होवर करते हैं, तो एक संक्षिप्त विवरण टेक्स्ट (जैसे टूलटिप) कैसे प्रदर्शित करें।
टूलटिप कैसे जोड़ें इसमें कुछ सेकंड लगते हैं आप बस HTML शीर्षक विशेषता का उपयोग करें:title ।
होवर पर टेक्स्ट प्रदर्शित करें (माउस ओवर एलिमेंट)
रूबिक क्यूब की छवि का एक मूल उदाहरण यहां दिया गया है। इस छवि पर अपना माउस ले जाएँ और कुछ ही सेकंड में रूबिक क्यूब के बारे में अतिरिक्त जानकारी पॉप अप हो जाती है:
यहां ऊपर दिए गए इमेज एलिमेंट के लिए HTML मार्कअप है:
<img
src="url-to-image-file"
title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik."
alt="A Rubik’s Cube"
/>मान लें कि जब आपके उपयोगकर्ता अपने माउस को किसी लिंक/एंकर तत्व पर ले जाते हैं, तो आप एक टूलटिप दिखाना चाहते हैं।
टूलटिप प्रकट करने के लिए अपने माउस को इस लिंक पर ले जाएँ
नवीनतम लेख
और HTML मार्कअप:
<a href="https://techstacker.com" title="Link to TechStacker’s front page"
>Latest articles</a
>
यही सब है इसके लिए। आप title जोड़ सकते हैं किसी भी HTML तत्व के लिए विशेषता।
क्यों पाठ दिखा रहा है जब आपके उपयोगकर्ता अपने माउस को किसी लाभकारी तत्व पर ले जाते हैं?
मान लीजिए कि आपके पास एक ऐसा तत्व है जो अपनी सादगी के कारण कुछ लोगों के लिए भ्रम पैदा कर सकता है। एक उदाहरण एक आइकन हो सकता है। अधिकांश लोग मुट्ठी भर से अधिक चिह्नों को नहीं पहचान सकते हैं, लेकिन वस्तुतः केवल पश्चिमी दुनिया में ही हजारों अलग-अलग चिह्न प्रदर्शित होते हैं।
केवल एक आइकन पर एक शीर्षक विशेषता जोड़ने से (उदाहरण के लिए एक छवि तत्व के अंदर) लोगों के पास आइकन के कार्य का स्पष्ट विवरण प्राप्त करने का विकल्प होता है। यह आपके UI में कहीं भी मौजूद है।
अब आप खुद सोच सकते हैं कि कितने लोग जानते हैं कि किसी तत्व पर मँडराने से कभी-कभी अतिरिक्त जानकारी सामने आती है?
यह एक अच्छा सवाल है। इसका उत्तर यह है कि यह आपके लक्षित दर्शकों पर निर्भर करता है। अधिकांश तकनीक-प्रेमी लोग सहज रूप से जानते हैं कि होवरिंग + 1-2 सेकंड प्रतीक्षा करने से अक्सर विषय के बारे में अतिरिक्त जानकारी सामने आती है।
लेकिन क्या होगा यदि आपके दर्शकों में बड़े पैमाने पर गैर-तकनीकी जानकार लोग हों, या शायद वे लोग हों जो वेब पर बहुत अधिक ब्राउज़ नहीं करते हैं?
ठीक है, तो मेरी डिफ़ॉल्ट कार्रवाई ल्यूक Wroblewski की सार्वभौमिक सलाह को लागू करना है:
स्पष्ट हमेशा जीतता है।
यदि कोई आइकन स्पष्ट नहीं है, या कम से कम लोगों के उच्च प्रतिशत के लिए स्पष्ट नहीं है, तो आप या तो एक बेहतर आइकन बनाते हैं या उस आइकन को संक्षिप्त विवरण के साथ जोड़ते हैं।
वैसे भी, एक शीर्षक विशेषता जोड़ना, और बेशक, एक एएलटी विशेषता (स्क्रीन रीडर के लिए, दृष्टिबाधित के लिए) केवल अपसाइड है। आपको इसे हर चीज़ में जोड़ने की ज़रूरत नहीं है, लेकिन अगर आपको संदेह है, तो आप इसे भी कर सकते हैं।
एक अतिरिक्त बोनस के रूप में, कम से कम परोक्ष रूप से, कम से कम ALT विशेषताओं का SEO पर भी प्रभाव पड़ता है, लेकिन शायद सीधे भी।
ऐसा कैसे? खैर, एएलटी विवरण एक्सेसिबिलिटी श्रेणी के अंतर्गत आता है, जिसे Google ने कोई रहस्य नहीं बनाया है, इसका प्रभाव इस बात पर पड़ता है कि वे आपकी वेबसाइट की गुणवत्ता का आकलन कैसे करते हैं, जो आपकी एसईओ रैंकिंग शक्ति को प्रभावित करेगा।
जहां तक शीर्षक विशेषता की बात है, यह इसका उपयोग करता था प्रभाव एसईओ, लेकिन मेरे नवीनतम शोध के आधार पर, यह स्पष्ट नहीं है कि यह आज भी करता है या नहीं। लेकिन फिर से, शीर्षक विशेषता का उपयोग करने में कोई स्पष्ट कमी नहीं है, केवल उल्टा है।
वैकल्पिक टूलटिप विधियां
आपको अंतर्निहित HTML टूलटिप/शीर्षक विशेषता के अधिक कस्टम संस्करण की आवश्यकता हो सकती है। उस स्थिति में, आप विभिन्न उपयोग मामलों के लिए समय और शैली टूलटिप्स दोनों के लिए जावास्क्रिप्ट और सीएसएस का उपयोग कर सकते हैं। मैं उस उपयोगी कौशल को कवर करूंगा/करूंगी भविष्य के ट्यूटोरियल में (यह मेरी टू-राइट लिस्ट में है!)।