How to show a different image on mouse hover

Recently I have posted an article on how to create animated gif images, which although makes animated images, but those images change their frames automatically, but here's a method, where you can control when to change the frame, that means, the picture is changed, only when mouse cursor is placed on the image. See an example below (Place the mouse cursor on the image):

This method is quite easy,
For this method there are two steps:

Firstly you have to add some code to your template, to do that
Go to "Layout" section, then click on "Edit HTML",
Now find this code
</body> (it will be at the bottom)

Then immediately BEFORE this tag, paste this 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>

After doing this, save the template.

Second step:
Now onwards, while posting any article, whenever you want to show this effect, upload both the images, and the links should be embedded properly as instructed below:

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

Replace the lines in RED and BLUE color, with appropriate links.
And enjoy the effects...

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts