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

function pat_getByClass(c){
ems=new Array();e=document.getElementsByTagName('*');pattern=new RegExp('(^|\\\\s)'+c+'(\\\\s|$)');
return ems;

function ps_flipit(){
var c = pat_getByClass('flipit');


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" />
</center></td> </tr>

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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Next Post »


Write comments
December 29, 2008 10:29 PM delete

im sorry, but is the 2nd step still on the "edit HTML" section (edit layout)? or on the posts section (while creating the post)?

December 29, 2008 11:12 PM delete

i think the code isnt working :(

January 01, 2009 4:40 AM delete

The first step is the modification of BLOG TEMPLATE [CSS modification]

The second step is to be done, when writing the ACTUAL POST/ARTICLE !

September 01, 2009 5:50 PM delete

This is great Divya ^^

The '50% transparent trick' is a better version of this, but for just one image, isn't it ?

February 15, 2010 12:58 PM delete


Thank you for your blog. What is the difference between the image target link and the source link? I have uploaded my image to phobucket and I just have a direct link. Thank you from Spain.

February 15, 2010 1:18 PM delete

Hey there!

Try a easier method: HTML ROLLOVER BUTTONS
Although in the tutorial I have mentioned buttons/small images, but you can certainly use that code for larger pictures too..

February 15, 2010 2:05 PM delete

Hello again and thank you. So, must I put the direct link that photobucket gives me instead of IMAGE1? I can't get it to work. I have used the buttons, though. Could you give me a hand with this? Just not sure what to put where it says image1 and image 2, thank you very much.

February 15, 2010 2:12 PM delete


firstly, to host images, use (that is owned by photobucket too, but this one gives unlimited bandwidth, moreover you easily get the direct links for your images)

Upload 2 images, paste the direct links here in this comment thread, I'll give you the exact code to be used in your blog.

February 15, 2010 2:23 PM delete

Hello again,

I can't copy or paste inside this box. Is that normal?

Thank you.

February 15, 2010 2:30 PM delete

Yeah that's normal if you are using firefox 3.5.xx
read this post to solve that issue (just notice that screenshot) to separate this comment-form from this page, and then you'll be able to paste into it:
Unable To Paste Text While Commenting In Blogger Blogs ? [Problem Fixed]

February 15, 2010 2:52 PM delete


at last! Here are my two direct links from



I understand you will give me an example of how to do it for future images.

Thank you very much for your help, I am really learning with this blog.

February 16, 2010 12:08 AM delete

okay, This is the exact code you have to use:

<a href=""><img width="231" height="350" src="" onmouseover="this.src=''" onmouseout="this.src=''" alt="Click Me"/></a>

change the values in href and alt.

It is better if you use mention the width and height parameters every time you do this (I have already done it this time) - so it is better if you use images of almost same size (in this case width of first images is 241px and that of 2nd image is 231px, so I have taken 231px for both of them, to give an overall uniform look)

February 17, 2010 5:22 AM delete

Ok, great. Tnanks! Two last questions then: can I do this with the same code on side columns? And, more important: inside a post, how could I get the text to be alongside the photo (photo to the right, for example)? The text is either under or on top, but not on the side. Thank you very much.

February 18, 2010 12:32 PM delete

Yes you can do this in the sidebar too. Simply add a html/javascript widget and paste the code in to it.

And to align a pic to left/right, do this:
Normally a code looks like this:

<a><img src=""/></a>

So add this code to it:

<a><img style="float:right;" src=""/></a>

May 29, 2012 1:54 PM delete

i need help. Seriously. You're the best, and you've helped me through loads of crises when no one else gave good enough explenations on how to do this, and that.

Now I need something, a hack or whatever, that will allow me to add tabviews inside blogposts. You have one, or atleast its above your comments, i figured you had a statick tab there always following your posts. But, nevermind, I need a tabview inside one of my blogposts :(

thanks for reading : )


Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon