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:
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:
Replace the lines in RED and BLUE color, with appropriate links.
And enjoy the effects...
 |
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:
After doing this, save the template.<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>
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...