अक्सर वेबसाइटों पर अतिरिक्त जानकारीमँडराते समय पॉप-अप संकेत के रूप में रखा जाता है, उदाहरण के लिए, जटिल संक्षिप्ताक्षर समझने या उपयोगकर्ता कार्यों को स्पष्ट करने के लिए। इस इंटरफ़ेस समाधान को टूलटिप कहा जाता है। यह केवल मूल डेटा दिखाते हुए पृष्ठ पर स्थान बचाता है, लेकिन यदि आवश्यक हो, तो इसके अतिरिक्त की जाँच करने के लिए पाठक को विकल्प छोड़ देता है। विशुद्ध रूप से सूचनात्मक कार्य के अलावा, टूलटिप महत्वपूर्ण डिजाइन तत्व हो सकते हैं जो साइट की समग्र शैली पर जोर देते हैं और ध्यान आकर्षित करते हैं।
तत्व, इंटरैक्शन जिसके साथ टूलटिप की उपस्थिति का कारण बनता है, को लक्ष्य कहा जाता है।
पॉप-अप ब्लॉक में आमतौर पर महत्वपूर्ण होते हैंलेकिन बुनियादी जानकारी नहीं। यह माना जाता है कि उपयोगकर्ता को इसे तभी पढ़ना चाहिए जब वह चाहे। मुख्य सामग्री से नाराज, हस्तक्षेप या विचलित न होने के लिए, संकेत को कई आवश्यकताओं को पूरा करना चाहिए:
संकेत बनाने की क्षमता वेब पृष्ठों की हाइपरटेक्स्ट मार्कअप भाषा में अंतर्निहित है। प्रारंभ में, इसका उद्देश्य संक्षिप्त और जटिल वैज्ञानिक शब्दों को समझना था।
इस तरह के पॉपअप ब्लॉक को बनाने के लिए, आपको एक शीर्षक विशेषता की आवश्यकता होती है, जो कि किसी भी HTML टैग के लिए उपलब्ध है।
<p> प्रॉक्सिमा सेंटॉरी के बारे में स्थित है4.22 <i शीर्षक = "९ ४६० 2३2 ४2२ ५ 800० >०० मीटर"> प्रकाश वर्ष </ i> पृथ्वी से, जो पृथ्वी से सूर्य की दूरी से 270 हजार गुना अधिक है। </ p> <img शीर्षक = "नेउशवांस्टीन कैसल" src = "/ images / disney.jpg">
HTML टूलटिप के मुख्य लाभ हैं: उपयोग में आसानी और किसी भी लेआउट तत्वों के साथ उपयोग करने की क्षमता - पाठ से छवियों तक। लेकिन उसके बड़े नुकसान भी हैं:
HTML शीर्षक विशेषता केवल छोटे सुझावों के लिए उपयुक्त है जिन्हें विशेष स्टाइल की आवश्यकता नहीं है। अन्य मामलों में, यह जानना उपयोगी है कि CSS का उपयोग करके टूलटिप्स कैसे बनाएं।
आप कैस्केडिंग स्टाइल शीट का उपयोग करके एक सुंदर कस्टम संकेत ब्लॉक बना सकते हैं। यह बुनियादी सीएसएस अवधारणाओं का उपयोग करता है:
प्रदर्शन;: होवर, जो माउस कर्सर के तहत किसी भी तत्व को सौंपा गया है;: इससे पहले और : उपरांतइसका उपयोग सरल संकेतों के लिए किया जा सकता है, ताकि एक अलग HTML तत्व न बनाया जा सके;ये सभी गुण आधुनिक ब्राउज़रों द्वारा अच्छी तरह से समर्थित हैं, जो टूलटिप तंत्र को विश्वसनीय बनाता है।
छद्म वर्ग : होवर, कर्सर को हॉवर करने के अलावा, टच स्क्रीन पर एक उंगली के स्पर्श पर भी प्रतिक्रिया करता है, जिससे स्मार्ट गैजेट्स का समर्थन करना संभव हो जाता है।
सीएसएस-टूलटिप या तो अपनी संरचना के साथ एक अलग HTML ब्लॉक हो सकता है, या किसी अन्य ब्लॉक का छद्म तत्व हो सकता है। इन विकल्पों में से प्रत्येक के पास अपने स्वयं के पेशेवरों और विचार करने के लिए विपक्ष है।
एक अलग कंटेनर के अंदर सामग्री में हेरफेर करना बहुत आसान है। आप इसमें चित्र, हेडर और अन्य तत्व रख सकते हैं।
छद्म तत्व आपको अनावश्यक से छुटकारा पाने की अनुमति देता हैब्लॉक और लेआउट को थोड़ा आसान बनाते हैं। पाठ सामग्री को लक्ष्य तत्व की विशेषता में रखा जा सकता है और खुद टूलटिप बनाने के बारे में चिंता करने की ज़रूरत नहीं है, सब कुछ सीएसएस द्वारा किया जाएगा। हालांकि, एक छद्म तत्व एक जटिल संरचना वाले ब्लॉक के लिए खराब अनुकूल है। साथ ही, इसे केवल टैग बंद करने के लिए बनाया जा सकता है। आप इस तरह के संकेत को सीधे छवि में संलग्न नहीं कर सकते।
चलो नक्षत्र सेंटोरस से निकटतम स्टार के लिए एक जटिल संरचना के साथ एक अच्छी तरह से डिज़ाइन किया गया टूलटिप बनाते हैं।
सबसे पहले, चलो HTML मार्कअप परिभाषित करते हैं:
<h2> तारामंडल के सितारे सेंटोरस </ h2> <ulवर्ग = "तारे"> <li class = "star"> अल्फा सेंटॉरी </ li> <li class = "star"> बीटा सेंटौरी </ li> <li class = "star"> थीटा सेंटौरी </ li> <li class = "star"> गामा सेंटौरी </ li> <li class = "star"> एप्सिलॉन सेंटॉरी </ li> <ली क्लास = "स्टार"> प्रॉक्सिमा सेंटॉरी <div class = "tooltip"> <img src = "/ images / proxima.jpg"> प्रॉक्सिमा सेंटॉरी (लैटिन प्रॉक्सिमा से - निकटतम) एक लाल बौना है जो स्टार सिस्टम अल्फा सेंटौरी से संबंधित है, जो सूर्य के बाद पृथ्वी के सबसे करीब का तारा है। </ div> </ li> </ ul>आइए CSS का उपयोग करके संकेत ब्लॉक को स्टाइल और छिपाएं:
।तारा { पद:रिश्तेदार; } / * टूलटिप के लिए शैलियाँ * / .star .tooltip { कुछ भी डिस्प्ले मत करो; स्थिति: निरपेक्ष; शीर्ष: 50%; रूपांतर: ट्रांस्वाय (-50%); बायां: 100%; } / * सजावटी त्रिकोण के लिए शैलियों * / .star .tooltip: {...} से पहले / * हॉवर पर पॉपअप टूलटिप * / .star: होवर .tooltip {डिस्प्ले: ब्लॉक; }
सूची की शैली और टूलटिप स्वयं कुछ भी हो सकते हैं, उन्हें संक्षिप्तता के लिए छोड़ दिया जाता है।
टूलटिप को एक अलग ब्लॉक में रखने से आप इसके अंदर की छवियों का उपयोग कर सकते हैं, पाठ को प्रारूपित कर सकते हैं, और यहां तक कि एक सुंदर डिजाइन के लिए छद्म तत्व भी बना सकते हैं।
टूलटिप निर्माण का प्रदर्शनछद्म तत्व चित्रमय संपादक पैनल में मदद करेगा। प्रत्येक उपकरण को एक आइकन के रूप में प्रस्तुत किया जाता है, जिसका उद्देश्य अनुभवहीन उपयोगकर्ता के लिए समझ से बाहर हो सकता है। ताकि कोई भी दुखी न हो, नामों के साथ संकेत चिह्न में जोड़े जाएं।
पैनल का HTML कोड इस तरह दिखेगा:
<div class = "Instruments"> <div class = "instrument"data-tooltip = "ब्रश"> <img src = "/ images / brush-icon.svg"> </ div> <div class = "instrument" data-tooltip = "Fill"> <img src = "/ images / color-fill-icon.svg"> </ div> <div class = "instrument" data-tooltip = "ज़ूम इन"> <img src = "/ images / zoom-in-icon.svg"> </ div> <div class = "instrument" data-tooltip = "ज़ूम आउट"> <img src = "/ images / zoom-out-icon.svg"> </ div> </ div>साधन का अद्वितीय नाम विशेषता में रखा गया है डेटा-टूलटिप... ब्लॉक के अंदर एक आइकन है, लेकिन HTML कोड में टूलटिप स्वयं गायब है।
चूंकि टूलटिप में केवल लघु व्याख्यात्मक पाठ होगा, आप प्रकाश पैनल को अव्यवस्थित करने से बचने के लिए छद्म तत्वों का उपयोग कर सकते हैं।
/ * आइकन के लिए सामान्य शैलियों * / ...साधन { स्थिति: रिश्तेदार; रंग: # 666; पृष्ठभूमि: सफेद; कर्सर: सूचक; } / * हॉवर पर आइकन के लिए शैलियाँ * / .instrument: होवर { पृष्ठभूमि: # 666; सफ़ेद रंग; } / टूलटिप के लिए * * शैलियाँ .instrument: होवर: के बाद { सामग्री: attr (डेटा-टूलटिप); स्थिति: निरपेक्ष; बायां: 100%; रंग: # 666; }छद्म तत्व केवल होवर पर दिखाई देता है, इसलिए इसे प्रदर्शन के साथ छिपाने की आवश्यकता नहीं है: ब्लॉक। इसका स्थान गुणों द्वारा नियंत्रित होता है पद और बाएँ / दाएँ / ऊपर / नीचे... एक विशेषता से प्राप्त करने के लिए डेटा-टूलटिप लक्ष्य सीएसएस टूलटिप सामग्री तत्व फ़ंक्शन प्रदान करता है Attr ()... सजावटी शैलियों को संक्षिप्तता के लिए छोड़ दिया गया है।
पहले से चर्चा की गई टूलटिप तंत्र ने लक्ष्य तत्व पर माउस हॉवर को प्रतिक्रिया दी और एक सीएसएस छद्म वर्ग पर आधारित थी : होवर... कुछ स्थितियों में, टूलटिप को क्लिक पर खोलना बेहतर होता है। यह प्रभाव जावास्क्रिप्ट में लागू करना आसान है, लेकिन सीएसएस काम कर सकता है।
सीएसएस छद्म वर्गों की सूची में एक अद्भुत वर्ग है : ध्यान केंद्रित करेंलिंक और इनपुट तत्वों के लिए उपलब्ध है। के विपरीत है : होवरजो कर्सर के बाहर निकलते ही गायब हो जाता हैमाउस, यह छद्म वर्ग आपको लक्ष्य तत्व की सक्रिय स्थिति को बचाने की अनुमति देता है। और अगर इनपुट फ़ील्ड उपकरण बनाने के लिए बहुत उपयुक्त नहीं हैं, तो लिंक ठीक हैं।
आइए सूची के आइटम को पहले उदाहरण से लिंक से बदलें:
<a class = "star" href = "जावास्क्रिप्ट:शून्य (0) "> प्रॉक्सिमा सेंटॉरी <div class = "tooltip"> <img src = "/ images / proxima.jpg"> प्रॉक्सिमा सेंटॉरी (लैटिन प्रॉक्सिमा से - निकटतम) एक लाल बौना है जो स्टार सिस्टम अल्फा सेंटौरी से संबंधित है, जो सूर्य के बाद पृथ्वी के सबसे करीब का तारा है। </ div> </a>
गुण href अर्थ सहित जावास्क्रिप्ट: शून्य (0) लिंक पर क्लिक करने के लिए किसी भी ब्राउज़र प्रतिक्रिया को रोकने के लिए आवश्यक है।
निम्नलिखित शैलियाँ आपको क्लिक पर स्टार का वर्णन करने वाले टूलटिप को लागू करने की अनुमति देंगी:
.star .tooltip { कुछ भी डिस्प्ले मत करो; } .स्टार: फ़ोकस .tooltip { प्रदर्शन क्षेत्र; }जब तक उपयोगकर्ता पृष्ठ पर कहीं भी क्लिक नहीं करेगा तब तक लिंक फोकस बनाए रखेगा।
तो, जावास्क्रिप्ट का उपयोग किए बिना भी एक वेबसाइट पर एक टूलटिप को कई तरीकों से बनाया जा सकता है। उनमें से प्रत्येक अच्छा है, आपको बस एक विशिष्ट स्थिति के लिए सबसे उपयुक्त चुनने की आवश्यकता है।
