CSS Image Sprites
ရုပ်ပုံ Sprites
image sprite သည် ပုံတစ်ပုံတည်းတွင်ထည့်ထားသော ပုံများစုစည်းမှုဖြစ်သည်။
ပုံများစွာပါသည့် ဝဘ်စာမျက်နှာတစ်ခုသည် ဆာဗာတောင်းဆိုမှုများစွာကို တင်ရန်နှင့် ထုတ်ပေးရန် အချိန်ကြာမြင့်နိုင်သည်။
image sprites ကိုအသုံးပြုခြင်းသည် server တောင်းဆိုမှုအရေအတွက်ကိုလျှော့ချပြီး bandwidth ကိုချွေတာလိမ့်မည်။
Image Sprites - ရိုးရှင်းသော ဥပမာ
သီးခြားပုံသုံးပုံသုံးမည့်အစား၊ ကျွန်ုပ်တို့သည် ဤပုံတစ်ပုံ ("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 attribute သည် ဗလာမဖြစ်နိုင်သောကြောင့် သေးငယ်သောအကြည်ရုပ်ပုံတစ်ပုံကိုသာ သတ်မှတ်သည်။ ပြသထားသောပုံသည် CSS တွင် ကျွန်ုပ်တို့သတ်မှတ်ထားသော နောက်ခံပုံဖြစ်သည်။width: 46px; height: 44px;
- ကျွန်ုပ်တို့အသုံးပြုလိုသော ပုံ၏အပိုင်းကို သတ်မှတ်ပါ။background: url(img_navsprites.gif) 0 0;
- နောက်ခံပုံနှင့် ၎င်း၏တည်နေရာကို သတ်မှတ်သည် (ဘယ်ဘက် 0px၊ အပေါ်ဆုံး 0px)
ဤသည်မှာ image sprites ကိုအသုံးပြုရန် အလွယ်ကူဆုံးနည်းလမ်းဖြစ်သည်၊ ယခု ကျွန်ုပ်တို့သည် ၎င်းကို လင့်ခ်များနှင့် ရွေ့လျားစေသောအကျိုးသက်ရောက်မှုများကို အသုံးပြုခြင်းဖြင့် ၎င်းကိုချဲ့ထွင်လိုပါသည်။
Image Sprites - လမ်းညွှန်မှုစာရင်းကို ဖန်တီးပါ။
လမ်းညွှန်မှုစာရင်းဖန်တီးရန် ကျွန်ုပ်တို့သည် sprite ပုံ ("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 {position:relative;} - ၎င်းအတွင်း၌ လုံးဝနေရာချထားခြင်းကို ခွင့်ပြုရန် အနေအထားကို ဆွေမျိုးအဖြစ် သတ်မှတ်ထားသည်။
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - အနားသတ်နှင့် padding ကို 0 ဟုသတ်မှတ်ထားပြီး၊ စာရင်းပုံစံကို ဖယ်ရှားလိုက်ပြီး စာရင်းအရာအားလုံးကို လုံးဝနေရာချထားသည်
- #navlist li၊ #navlist a {height:44px;display:block;} - ပုံအားလုံး၏အမြင့်မှာ 44px ဖြစ်သည်
ယခုအခါ သီးခြားအစိတ်အပိုင်းတစ်ခုစီအတွက် အနေအထားနှင့် ပုံစံကို စတင်ပါ။
- #home {left:0px;width:46px;} - ဘယ်ဘက်တစ်လျှောက်လုံး နေရာချထားပြီး ပုံ၏အကျယ်မှာ 46px ဖြစ်သည်
- #home {background:url(img_navsprites.gif) 0 0;} - နောက်ခံပုံနှင့် ၎င်း၏တည်နေရာကို သတ်မှတ်သည် (ဘယ်ဘက် 0px၊ ထိပ် 0px)
- #prev {left:63px;width:43px;} - ညာဘက်တွင် 63px (#home width 46px + အရာများကြားတွင် အပိုနေရာအချို့) ရှိပြီး အကျယ်မှာ 43px ဖြစ်သည်။
- #prev {background:url('img_navsprites.gif') -47px 0;} - နောက်ခံပုံကို ညာဘက်တွင် 47px သတ်မှတ်သည် (#အိမ်အကျယ် 46px + 1px လိုင်းပိုင်းခြားခြင်း)
- #next {left:129px;width:43px;}- ညာဘက်တွင် 129px နေရာချထားသည် (#prev ၏အစမှာ 63px + #prev width 43px + extra space) ဖြစ်ပြီး အကျယ်မှာ 43px ဖြစ်သည်။
- #next {background:url('img_navsprites.gif') -91px 0;} - နောက်ခံပုံကို 91px ညာဘက်တွင် သတ်မှတ်သည် (#home width 46px + 1px line divider + #prev width 43px + 1px line divider)
ရုပ်ပုံ Sprites - Hover Effect
ယခု ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ လမ်းညွှန်မှုစာရင်းတွင် ပြေးလွှားသည့်အကျိုးသက်ရောက်မှုကို ထည့်လိုပါသည်။
အကြံပြုချက်- ရွေးချယ်ရေး :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;
}
ဥပမာ ရှင်းပြထားသည်-
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - ရွှေ့ထားသည့် ပုံသုံးပုံစလုံးအတွက် တူညီသောနောက်ခံအနေအထားကို သတ်မှတ်ပေးသည်၊၊ 45px သာ အောက်သို့သာ