वेब पेजों में बटनों की बैकलाइटिंग आमतौर पर दो छवियों का उपयोग करके व्यवस्थित की जाती है। जब आप दस्तावेज़ के संबंधित तत्व (लिंक या बटन) पर माउस कर्सर घुमाते हैं, तो एक घटना उत्पन्न होती है, जो सीएसएस भाषा में लिखे गए निर्देशों के अनुसार ब्राउज़र को एक छवि को दूसरी छवि में बदलने के लिए प्रेरित करती है। जब माउस कर्सर को बटन से दूर ले जाया जाता है, तो रिवर्स रिप्लेसमेंट होता है।
ज़रूरी
HTML और CSS भाषाओं का बुनियादी ज्ञान
निर्देश
चरण 1
ऐसे हाइलाइटिंग तंत्र को लागू करने के लिए कई विकल्प हैं। उनमें से किसी के लिए, आप समान HTML कोड का उपयोग कर सकते हैं, केवल संबंधित शैली विवरण को बदल सकते हैं। बटन का HTML कोड इस तरह दिख सकता है: बटन पर टेक्स्ट यहां इस पेज एलिमेंट (id = "btnA") का आइडेंटिफ़ायर दिया गया है, जिससे स्टाइल विवरण संलग्न किया जाएगा।
चरण 2
विकल्पों में से एक को लागू करने के लिए, आपको दो चित्र तैयार करने की आवश्यकता है, जिनमें से एक निष्क्रिय स्थिति में बटन दिखाता है, और दूसरा बैकलाइट के साथ। उनका उपयोग लिंक की पृष्ठभूमि छवि के रूप में किया जाएगा। इस बटन के लिए CSS निर्देश इस तरह दिख सकते हैं:
ए # बीटीएनए, ए # बीटीएनए: का दौरा किया {
प्रदर्शन क्षेत्र;
चौड़ाई: 50 पीएक्स;
ऊंचाई: 20 पीएक्स;
पृष्ठभूमि: url (btnA.gif) नो-रिपीट;
सीमा: 0;
}
ए # बीटीएनए: होवर {
पृष्ठभूमि: url (btnA_hover.gif) नो-रिपीट;
सीमा: 0;
}
यहां, पहले ब्लॉक में, बटन को दर्शाने वाली छवि के आयामों को दर्शाया गया है (चौड़ाई: 50px; ऊंचाई: 20px;)। आपको उन्हें अपनी तस्वीर के आयामों से बदलने की जरूरत है। छवि फ़ाइलों के नाम उसी तरह बदले जाने चाहिए: btnA.
चरण 3
एक विकल्प दोनों छवियों को एक चित्र में रखना है। यह एक के ऊपर एक हो सकता है, या यह एक दूसरे के बगल में हो सकता है। इसका उपयोग लिंक के लिए पृष्ठभूमि के रूप में भी किया जाएगा। चूंकि बटन आकार बटन शैली विवरण में निर्दिष्ट होते हैं, जो कुछ भी उनमें फिट नहीं होता है वह दिखाई नहीं देगा। इस मामले में, सीएसएस विवरण में दिए गए निर्देश, माउस कर्सर को मँडराते समय, पृष्ठभूमि छवि को स्क्रॉल करना चाहिए ताकि हाइलाइट किए गए बटन की छवि वाला क्षेत्र फ्रेम में गिर जाए। इस विकल्प के लिए, पिछले चरण के कोड को निम्नानुसार बदला जाना चाहिए:
ए # बीटीएनए, ए # बीटीएनए: का दौरा किया {
प्रदर्शन क्षेत्र;
चौड़ाई: 50 पीएक्स;
ऊंचाई: 20 पीएक्स;
पृष्ठभूमि: url (btnA.gif) नो-रिपीट;
सीमा: 0;
}
ए # बीटीएनए: होवर {
बैकग्राउंड: url (btnA.gif) नो-रिपीट 21px;
सीमा: 0;
}
यह मानता है कि आपने छवियों को एक के ऊपर एक रखा है (नीचे हाइलाइट किया गया है) और btnA.gif"
