Checkout the image above. Hover your mouse over it! The image changes! This effect is brought about by a nifty piece of Javascript. It can be used to show two images which are events in a timeline. Like a small boy suddenly grown up to be an adult.
To bring about this effect copy the code below :
<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>
Paste the above code immediately before </body> tag in your blog template code box and save template. It is right at the bottom of the template. To get to your Template code box login at Blogger.com and click on Layouts link on Dashboard. Then click Edit Html subtab of Layouts tab.
UPLOADING THE IMAGES
Next click +New Post link on Dashboard to open the Post Editor. Upload two images to your post. Click on Edit Html tab in upper right corner of Post Editor.
Modify the images code by adding <div class="flipit"> before the code and </div> tag after it. Also the code should be modified until it resembles the code below :
<div class="flipit">
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://..../s1600-h/......jpg">
<img style="cursor:pointer; cursor:hand;" src="...../s320/.....jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXXX" /></a>
<a style="display:none" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="...../s1600-h/....jpg">
<img style="cursor:pointer; cursor:hand;" src="......../s320/........jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXXX" />
</a></div>
DO NOT COPY-PASTE THE ABOVE CODE. You have to modify your code till it resembles the above code without including the dots "...../s1600-h/...jpg" and the XXXXXXXs.
Also REMOVE ALL LINE BREAKS IN CODE ABOVE.
Publish Post and Enjoy!
UPDATE
You can also upload images to Photobucket.com (or any other free hosting service) and use the Direct Link of each image as supplied by them in the code below :
<div class="flipit"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="cursor:pointer; cursor:hand;" src="DIRECT_LINK_IMAGE_1" border="0" alt=""id="BLOGGER_PHOTO_ID_5234209777812851826" /></a><a style="display:none" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="cursor:pointer; cursor:hand;" src="DIRECT_LINK_IMAGE_2" border="0" alt=""id="BLOGGER_PHOTO_ID_5234209406522277442" /></a></div>
Replace DIRECT_LINK_IMAGE_1 and DIRECT_LINK_IMAGE_2 with direct links of the pictures at Photobucket.
You will get this effect :
41 comments:
I'll be darn if I wasn't excited about finding this little trick, but when I tried it, I couldn't get it to work (for me).
Add coding before "body" in template code - CHECK
Uploaded two images, one b&w, one color - CHECK
Modified post code to read like yours, with the exception of the "id=..." - CHECK
RESULT: With mouse over, the image shifts ever so slightly. But, the second of the two images never appears.
REACTION: Scratching head!?!?
Mod,
What is the blog address?
Blog address:
http://wkatlit.blogspot.com/
I have a b&w and a colored image of the front of the bookstore...
Thanks...
Mod,
The </body> tag is at the bottom of the Template Code box.
You have pasted the code before the <body> tag which is a different tag.
NOTE : The slash / at the beginning.
Paste the code immediately before the </body> tag at the bottom of the Template Code box.
Gotcha! Duh me!
THANK YOU!!!
You're the MAN!
Just want to say thank you. I've learned so much from you in just a few days. Keep up the good work.
Just found this tutorial anfd its exactly what I need but I can't seen to get it to work.
I have checked all the code and everything looks o.k. but nothing.
My blog is at:-
http://ghghyy.blogspot.com/
Londonbackpacker,
Edit the post in Edit Html tab of post editor and remove the <p> tag bbefore and </p> tags after the photograph codes.
Think I worked it out
there were br in the code deleted them and it works.
Many thanks
great mr VIN, iam absolutely amazed to see this tip, iam proud of U for being so generous to any1.
iam more proud of U that ur Indian.
Very few times i feel so happy to here such news, last time was 'bindra winning gold at Beijings Olympics'
MERA BHARAT MAHAAN!
in reciprocation to this tip,
ican offer you any help in template/header designing.
ask me anytime, if you need such.
brilliantbluz.blogspot.com
This is such a great tutorial, but I cannot get it to work :(. If you could help me out I'd greatly appreciate it!
http://amberstests.blogspot.com/
The Gray Family,
Try replacing 's640' in the code with 's320'.
Hmmm I changed that but it just made the image smaller, I still can't get it to switch :(. If you have any other ideas I'd really appreciate it. Thank you so much for your help!
The Gray Family,
Have you pasted the Javascript code before the </body> tag in your template as shown in first step in above post?
Vin, do you think you could add this code as a gadget (for the header)? Just checking. I've been working on a code for mouseover (similar to flipit) but I still have spaces.
http://grimesfamilyscrapbook.blogspot.com (it says easy custom blogs because i'm using as my testing site).
Thanks again!
Jeanette
Vin, this is the best yet. It hasn't worked for me so I know am leaving out something important?
Lucy
http://lpalta.blogspot.com/
Vin, I am not sure where to get info re href="http://..../s1600-h/......jpg and " src="...../s320/.....jpg" (in both paragraphs of Modify block. Is that a link I can copy and paste from my picture in my Photobucket album and overwrite the above?
the lp's,
Do it on a test blog first. Then just copy paste the code into main blog.
Vin, I copied and pasted the first set of code in my Layout html screen just above the body tag at the bottom.
Then I uploaded two images to my Post. I am not sure what to modify in the post's html?
Do the images have to be the same size or properties. I thought it would be cool to show my tomatoes and then show them as being canned. I am feeling dumber than a first grader...
Lucy
the lp's,
What is the link of your post?
Hello Vin, I am wondering if I sent you the right link. By the link to my post, I clicked on the post and copied and pasted the address from the Mozzila Firefox address bar? Lucy
http://www.blogger.com/publish-confirmation.g?blogID=7948645584395300602&postID=5299220608554761574×tamp=1238266943896&javascriptEnabled=true
the lp's,
That is the address of the post editor. Instead click post title to open the post. Copy post address from address bar of browser and paste here.
Vin, I sent the post editor address because I thought you might have to see the HTML.
http://crappitycraptestsite.blogspot.com/2009/03/blog-post.html
I have two posts so I will send both addresses. Here is the second address.
http://crappitycraptestsite.blogspot.com/2009/03/from-garden-to-jar.html
Hopefully, I got one of them right?
Lucy
I’ve added button pictures in place of footer text links.
I’m trying to do this hover effect with my… new, home, older.. Button Picture links.
Not sure if this will work but it looks to me like I would need 6 image spots in the code .
Even then not sure if it would mess up the nav links ?
the mirror test,
Depends on which method you are using?
the lp's,
Upload the images to Photobucket.com and use the Direct Link of the images in the above code.
Vin, I went into the edit post and put the first direct link into the top paragraph after the cursor hand src=overwriting what was there up to .jpg.
Same with second link in second paragraph.
Picture just enlarges when I click on it. Oh my!
Lucy
Uuummmm, hope I am not messing up. I don't see my post so double checking. I put the direct link from my Photobucket album after the cursor hand src=" in the two paragraphs in my post editor HTML(both times overwriting the ......../s320/.......).
I wonder if you could apply this only for a specific post. In your case it is applied to the layout file which would make the existence of the javascript code even if some other post don't need it. Could you please give me any direction on that ?
@ the lp's,
The two links should be same i.e. The direct link you put instead of the '/s320/' links should be same. Same for '/s1600-h/' links.
@ aaraksheet,
The code will only apply when you enclose the code for the pictures within <div class="flipit"> and </div>
It does not apply to photographs not enclosed in the above div.
The two links are the same and the images are enclosed within..div class="flipit"... and .../div>....still have two separate images that enlarge when clicked upon?
the lp's,
Have a look at this test post.
OMG, I did it! Thank you a gazillion times.
Lucy
I didn’t really get an answer VIN ?
How do I get a mouse over effect for my made picture link buttons ?
Newer , Home , Older
the mirror test,
This post is about mouseover effect in posts. What you want to do is have this effect on images in template. You can try pasting the code under UPDATE in above post in template and modifying it. Also see where you should modify the template code to change navigation link images.
Can I use this code to mouseover a thumbnail and have the hover image be bigger? Or do both images have to be the same size?
thanks
Spotty,
Try it out on a test blog first.
Spotty,
Try it on a test blog first.
This has got to be one of the coolest post options I've seen! I will definitely be trying it out and will of course give credit to your site for my cool new find! =)
Thanks for a great tutorial on the mouseover hover effect. It works great
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.