Show different image on mouse hover

ပံုကို mouse တင္လိုက္ရင္ ေနာက္တစ္ပံုေျပာင္းသြားေအာင္ လုပ္နည္းေလးပါ။



ဒီနည္းေလးကိုသံုးမယ္ဆိုရင္ေတာ့ Edit Html ကိုသြားၿပီးေတာ့ </body> ကိုရွာပါ။ေတြ႕ၿပီဆိုရင္ သူ႔အေပၚမွာေအာက္က code ကိုထည့္ေပးလိုက္ပါ။

<script type="text/javascript">
//<![CDATA[
function pat_getByClass(c){
ems=new Array();e=document.getElementsByTagName('*');pattern=new RegExp('(^|\\\\s)'+c+'(\\\\s|$)');
for(i=0,j=0;i<e.length;i++)if(pattern.test(e[i].className)){ems[j]=e[i];j++;}
return ems;
};
function ps_flipit(){
var c = pat_getByClass('flipit');
for(i=0;i<c.length;i++){
c[i].firstChild.onmouseover=function(){
this.style.display='none';
this.parentNode.lastChild.style.display='';
};
c[i].lastChild.onmouseout=function(){
this.style.display='none';
this.parentNode.firstChild.style.display='';
};
}
}
ps_flipit();
//]]>
</script>

ၿပီးရင္ save template လုပ္ပါ။

ေနာက္တဆင့္ကေတာ့ သင္ post တင္တဲ့အခါ အေပၚကပံုလိုမ်ဳိးတင္ခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္က code အတိုင္းပံုကိုတင္ေပးရပါမယ္။

<table border="1">
<tr> <td><center><div class="flipit">
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="FIRST_IMAGE_TARGET_LINK_HERE"><img style="cursor:pointer; cursor:hand;" src="FIRST_IMAGE_SOURCE_LINK_HERE" border="0" alt=""id="PHOTO_ID" /></a><a style="display:none" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="SECOND_IMAGE_TARGET_LINK_HERE"><img style="cursor:pointer; cursor:hand;" src="SECOND_IMAGE_SOURCE_LINK_HERE" border="0" alt=""id="PHOTO_ID" />
</a></div>
</center></td> </tr>
</table>

အနီ နဲ႔ျပထားတဲ့ေနရာမွာေတာ့ ပံုကိုႏွိပ္လိုက္ရင္ ေရာက္ေစခ်င္တဲ့ link ကိုထည့္ပါ။
အျပာ နဲ႔ျပထားတဲ့ေနရာမွာေတာ့ သင့္ပံုရဲ့ direct link ကိုထည့္ေပးပါ။

---