Show Different Image On Mouse Over on Blogger Blog

Do you like different image On Mouse Over on your Blog? Do you thing how to Show different Image On Mouse Over on Blog? Don't worry friend. Today I show how to do it. Just follow the below steps:-



1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Find out (Press Ctrl+F) the Code    </body>

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

7. After doing this, save the template.

8. Now whenever you want 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>

9. Replace the lines in RED and LIME color, with appropriate links and you are done.
Enjoy the effects...

0 comments:

Post a Comment