Image Rollover with Opacity

ပံုတစ္ပံုကို နဂိုကထပ္ ခပ္မိွန္မွိန္ လုပ္ထားၿပီး Mouse Pointer ကို အဲဒီပံုေပၚ တင္လိုက္တာနဲ႔ နဂို အေရာင္ ျဖစ္သြားတယ္။ Mouse Pointer ဖယ္လိုက္ရင္ ခပ္မိွန္မွိန္ ျပန္ျဖစ္သြားပါတယ္။ ဒါဟာ က်ေနာ္တို႔ စာေၾကာင္း လင့္ခ္ေတြမွာ Mouse Pointer တင္လိုက္ရင္ အေရာင္ေျပာင္းသြားတာနဲ႔ သေဘာတရား အတူတူပါပဲ။ ပံုမွန္အားျဖင့္ ပံုတစ္ပံုဟာ လင့္ခ္တစ္ခုအေနနဲ႔ လုပ္ေဆာင္မယ္ဆိုရင္ အဲဒီပံုေပၚ Mouse Pointer တင္လိုက္ရင္ လက္ပံု ေျပာင္းသြားတယ္။ ပံုကေတာ့ ဘာမွ ေျပာင္းလဲမႈ မရွိပါဘူး။ အခု ဒီ ေလ့က်င့္ခန္း အရဆိုရင္ ပံုေပၚ Mouse Pointer တင္လိုက္ရင္ ပံုရဲ႕ အေရာင္ မွိန္ေပးလိုက္ပါတယ္။ Mouse Pointer ေရာက္ေနၿပီ ဆိုတဲ့ သေဘာေပါ႔။ ကဲ ... က်ေနာ္တို႔ ေလ့က်င့္ခန္း စရေအာင္။

<br />a.linkopacity img {<br />filter:alpha(opacity=50);<br />-moz-opacity: 0.5; <br />opacity: 0.5;<br />-khtml-opacity: 0.5;}<br /><br />a.linkopacity:hover img {<br />filter:alpha(opacity=100);<br />-moz-opacity: 1.0;<br />opacity: 1.0;<br />-khtml-opacity: 1.0; }

အထက္က CSS ေတြကို Style Sheet ထဲမွာ ထည့္ေပးပါ။ Layout >> Edit HTML က ]]></b:skin> ရဲ႕ အေပၚနားမွာ ထည့္ေပးပါ။

ေအာက္မွာ ျမင္ရတဲ့ Code ဒီပံုေပၚေစတဲ့ မူရင္း Code ပါ။
<br /><a class="linkopacity" <br />href="http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Adore-48x48.png" <br />title="Adore Smiley" target="_blank"><br /><img <br />src="http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Adore-48x48.png" <br />alt="Adore Smiley"> <br /></a>
လိုင္း နံပါတ္ (၂) က href="http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Adore-48x48.png"  ဟာ ကလစ္ႏွိပ္ရင္ သြားမယ့္ လိပ္စာပါ။
လိုင္း နံပါတ္ (၅) က src="http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Adore-48x48.png" ဟာ ေပၚမယ့္ပံုရဲ႕ လိပ္စာပါ။
လိုင္း နံပါတ္ (၃) က title="Adore Smiley" ဟာ Mouse Pointer ပံုေပၚေရာက္ရင္ Pointer ေအာက္နားမွာ ေပၚမယ့္စာပါ။
target="_blank" ဆိုတဲ့ အတြက္ေၾကာင့္ ကလစ္ႏွိပ္လိုက္ရင္ ေနာက္ တစ္မ်က္ႏွာမွာ သြားေပၚပါ႔မယ္။
လိုင္း နံပါတ္ (၆) alt="Adore Smiley" ဟာ အေၾကာင္းတစ္ခုခုေၾကာင့္ ပံု မေပၚခဲ့ဘူးဆိုရင္ ပံုအစား ေပၚဖို႔ စာကို သက္မွတ္ေပးတာပါ။

ဒါဆို နားလည္ေလာက္ၿပီလို႔ ေမွ်ာ္လင့္မိပါတယ္။ အဆင္ေျပပါေစဗ်ာ။