[HowTo] Show different Image On Mouse Over on your Blog.[Tutorial]

The tutorial for How to show a different image on mouse over goes here…

Go to your Blogger Dashboard->Design->Edit tml
First of all backup your template before editing…

Now Find (Press Ctrl+F) the code </body>  

Now Just before the </body> Paste the following 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>

Just Preview, if its error free save it…

Now whenever you need to add any image in your blogger post with mouse over effect you need upload both pictures on some image hosting website,then paste below code with properly added links…..

<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>

You need to replace DARK BLUE links with the links which you want to open on clicking the images,and GREEN LINKS with the link where you hosted the images….
after this your visitors willbe able to see both images on hover..
Enjoyed this post share with me your comments.