सीएसएस छवि स्प्राइट्स
छवि स्प्राइट
एक छवि स्प्राइट एकल छवि में रखी गई छवियों का एक संग्रह है।
कई छवियों वाला एक वेब पेज लोड होने में लंबा समय ले सकता है और कई सर्वर अनुरोध उत्पन्न कर सकता है।
छवि स्प्राइट का उपयोग करने से सर्वर अनुरोधों की संख्या कम होगी और बैंडविड्थ की बचत होगी।
छवि स्प्राइट्स - सरल उदाहरण
तीन अलग-अलग छवियों का उपयोग करने के बजाय, हम इस एकल छवि ("img_navsprites.gif") का उपयोग करते हैं:
CSS के साथ, हम केवल उस छवि का हिस्सा दिखा सकते हैं जिसकी हमें आवश्यकता है।
निम्नलिखित उदाहरण में CSS निर्दिष्ट करता है कि "img_navsprites.gif" छवि का कौन सा भाग दिखाना है:
उदाहरण
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
उदाहरण समझाया:
<img id="home" src="img_trans.gif">- केवल एक छोटी पारदर्शी छवि को परिभाषित करता है क्योंकि src विशेषता खाली नहीं हो सकती। प्रदर्शित छवि वह पृष्ठभूमि छवि होगी जिसे हम CSS में निर्दिष्ट करते हैंwidth: 46px; height: 44px;- उस छवि के हिस्से को परिभाषित करता है जिसका हम उपयोग करना चाहते हैंbackground: url(img_navsprites.gif) 0 0;- पृष्ठभूमि छवि और उसकी स्थिति को परिभाषित करता है (बाएं 0px, शीर्ष 0px)
इमेज स्प्राइट्स का उपयोग करने का यह सबसे आसान तरीका है, अब हम लिंक और होवर इफेक्ट का उपयोग करके इसका विस्तार करना चाहते हैं।
छवि स्प्राइट्स - एक नेविगेशन सूची बनाएं
हम नेविगेशन सूची बनाने के लिए स्प्राइट छवि ("img_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 {स्थिति:सापेक्ष;} - इसके अंदर पूर्ण स्थिति की अनुमति देने के लिए स्थिति सापेक्ष पर सेट है
- #navlist li {मार्जिन: 0; पैडिंग: 0; सूची-शैली: कोई नहीं; स्थिति: पूर्ण; शीर्ष: 0;} - मार्जिन और पैडिंग 0 पर सेट हैं, सूची-शैली हटा दी गई है, और सभी सूची आइटम पूर्ण स्थिति में हैं
- #navlist li, #navlist a {height:44px;display:block;} - सभी इमेज की ऊंचाई 44px है
अब प्रत्येक विशिष्ट भाग के लिए स्थिति और शैली शुरू करें:
- #होम {बाएं:0px;चौड़ाई:46px;} - पूरी तरह से बाईं ओर स्थित है, और छवि की चौड़ाई 46px है
- #होम {पृष्ठभूमि: url (img_navsprites.gif) 0 0;} - पृष्ठभूमि छवि और उसकी स्थिति को परिभाषित करता है (बाएं 0px, शीर्ष 0px)
- #prev {बाएं: 63px;चौड़ाई:43px;} - 63px को दाईं ओर स्थित (#घर की चौड़ाई 46px + वस्तुओं के बीच कुछ अतिरिक्त स्थान), और चौड़ाई 43px है।
- #prev {बैकग्राउंड:url('img_navsprites.gif') -47px 0;} - बैकग्राउंड इमेज 47px को दाईं ओर परिभाषित करता है (#होम चौड़ाई 46px + 1px लाइन डिवाइडर)
- #next {बाएं:129px;चौड़ाई:43px;}- 129px दाईं ओर स्थित है (#prev की शुरुआत 63px + #prev चौड़ाई 43px + अतिरिक्त स्थान है), और चौड़ाई 43px है।
- #next {background:url('img_navsprites.gif') -91px 0;} - बैकग्राउंड इमेज को 91px दाईं ओर परिभाषित करता है (#होम चौड़ाई 46px + 1px लाइन डिवाइडर + #prev चौड़ाई 43px + 1px लाइन डिवाइडर )
छवि स्प्राइट्स - होवर प्रभाव
अब हम अपनी नेविगेशन सूची में होवर प्रभाव जोड़ना चाहते हैं।
युक्ति: चयनकर्ता का :hoverउपयोग सभी तत्वों पर किया जा सकता है, न कि केवल लिंक पर।
हमारी नई छवि ("img_navsprites_hover.gif") में होवर प्रभाव के लिए उपयोग करने के लिए तीन नेविगेशन छवियां और तीन छवियां शामिल हैं:
चूंकि यह एक एकल छवि है, और छह अलग-अलग फाइलें नहीं हैं, इसलिए जब उपयोगकर्ता छवि पर होवर करता है तो लोडिंग में कोई देरी नहीं होगी।
होवर प्रभाव जोड़ने के लिए हम केवल कोड की तीन पंक्तियाँ जोड़ते हैं:
उदाहरण
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
}
उदाहरण समझाया:
- #होम ए:होवर {पृष्ठभूमि: url('img_navsprites_hover.gif') 0 -45px;} - तीनों होवर छवियों के लिए हम समान पृष्ठभूमि स्थिति निर्दिष्ट करते हैं, केवल 45px और नीचे