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

0
157
views
Hello blogger friends,today i gonna share something with you which helps you to give a professional looks to your blog.We often add images to our posts,or our blog’s sidebar.hows that if you can show a different  image on mouse over.it means when one takes his/her mouse over the image ,the image will change to another….
So ready to know about this tick.

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.

Leave a Reply