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