सीएसएस इमेज स्पाइन
- पिछला पृष्ठ सीएसएस इमेज लाइब्रेरी
- अगला पृष्ठ सीएसएस एट्रिब्यूट चयनकर्ता
छवि स्पाइन
छवि स्पाइन एक छवि में समाविष्ट छवि संग्रह है。
अनेक छवि वाले वेब पेज को लोड करने में बहुत लंबा समय लग सकता है और कई सर्वर अनुरोधों को जन्म दे सकते हैं。
छवि स्पाइन का उपयोग करके सर्वर की अनुरोधों की संख्या को कम करना और बैंडविड्थ को बचाना संभव है。
छवि स्पाइन - सरल उदाहरण
हम एकल छवि ("navsprites.gif") का उपयोग करते हैं, न कि तीन अलग-अलग छवियों का उपयोग करते हैं:
CSS का उपयोग करके, हम केवल इच्छित छवि के किसी हिस्से को दिखाने में सक्षम होते हैं。
नीचे दिए गए उदाहरण में, CSS ने "navsprites.gif" छवि का किस हिस्से को दिखाना निर्धारित किया है:
उदाहरण
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
आगे आइये आज़ादी से प्रयास करें
उदाहरण स्पष्टीकरण:
<img id="home" src="trans.gif">- केवल छोटी पारदर्शी छवि को निर्धारित करें, क्योंकि src गुण को खाली नहीं रखा जा सकता है। वास्तव में दिखाई देने वाली छवि हमें CSS में निर्धारित पृष्ठभूमि छवि होगी。width: 46px; height: 44px;- हम उस छवि के किस भाग को उपयोग करना चाहते हैं को निर्धारित करेंbackground: url(navsprites.gif) 0 0;- पृष्ठभूमि छवि और इसका स्थान (left 0px, top 0px) निर्धारित करें
छवि स्पाइन - नेविगेशन सूची बनाना
हम नेविगेशन सूची को एक स्पाइन छवि ("navsprites.gif") का उपयोग करना चाहते हैं.
हम HTML सूची का उपयोग करेंगे, क्योंकि यह लिंक हो सकता है और साथ ही पृष्ठभूमि छवि को भी समर्थित करता है:
उदाहरण
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
आगे आइये आज़ादी से प्रयास करें
उदाहरण स्पष्टीकरण:
- #navlist {position:relative;} - स्थान रेलेटिव रूप से सेट किया गया है, ताकि उसमें अभिन्न स्थानांकन की अनुमति हो
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - बाहरी और भीतरी घनत्व 0 रखी गई है, list-style छोड़ दी गई है और सभी सूची तत्व अब अभिनिर्दिष्ट स्थानित हैं
- #navlist li, #navlist a {height:44px;display:block;} - सभी छवियों की ऊंचाई 44px है
अब, हर विशिष्ट भाग के लिए स्थान और शैली सेट करना शुरू करें:
- #home {left:0px;width:46px;} - हमेशा बाएँ स्थानित रहे, छवि चौड़ाई 46px
- #home {background:url(navsprites.gif) 0 0;} - बैकग्राउंड छवि और उसका स्थान (left 0px, top 0px) निर्धारित करता है
- #prev {left:63px;width:43px;} - दाएँ 63px (home चौड़ाई 46px + तत्वों के बीच कुछ अतिरिक्त खाली जगह), चौड़ाई 43px
- #prev {background:url('navsprites.gif') -47px 0;} - बैकग्राउंड छवि को दाएँ 47px (home चौड़ाई 46px + 1px विभाजक)
- #next {left:129px;width:43px;} - दाएँ 129px (prev शुरू 63px + prev चौड़ाई 43px + अतिरिक्त खाली जगह), चौड़ाई 43px
- #next {background:url('navsprites.gif') -91px 0;} - बैकग्राउंड छवि को दाएँ 91px (home चौड़ाई 46px + 1px विभाजक + prev चौड़ाई 43px + 1px विभाजक) निर्धारित करता है
इमेज स्पाइरिट - हॉवर इफेक्ट
अब, हम नेविगेशन सूची में हॉवर इफेक्ट जोड़ना चाहते हैं।
सूचना::hover चयनकर्ता सभी तत्वों के लिए उपयोगी है, न केवल लिंक के लिए।
हमारी नई छवि ("navsprites_hover.gif") में तीन नेविगेशन छवियाँ और तीन हॉवर इफेक्ट की छवियाँ शामिल हैं:
क्योंकि यह एक छवि है, नहीं कि छह अलग फ़ाइलें, और जब उपयोगकर्ता माउस को छवि पर ले जाता है तोलोडिंग देरी नहीं होगी。
हमें केवल तीन पंक्तियाँ जोड़नी हैं ताकि हॉवर इफेक्ट को लागू किया जा सके:
उदाहरण
#home a:hover {
background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
आगे आइये आज़ादी से प्रयास करें
उदाहरण स्पष्टीकरण:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - हम तीनों हॉवर इमेज के लिए एक समान बैकग्राउंड स्थान निर्दिष्ट करते हैं, केवल 45 पिक्सल नीचे
- पिछला पृष्ठ सीएसएस इमेज लाइब्रेरी
- अगला पृष्ठ सीएसएस एट्रिब्यूट चयनकर्ता
