Two focuses, one subject. Two pictures one frame.
Point your mouse on the picture to reveal the other.
I was just randomly taking close-up pictures of plants in the garden early morning after one rainy evening when I chanced upon this Zinnia plant with a new bud and a flower past its prime.
P.S.
Some of my blog friends asked if I can teach them how to do the 2-in-1 mouse trick. I'd be happy to. The procedure may look deceivingly complicated and lengthy for non-HTML coders but truth is it's short and easy once you get the hang of it.
So here's how I did it.
Click here to show or hide the code.
Procedure for the 2-in-1 mouse trick:
1. Load the two pictures you want to use.
2. Edit your blog, choose "Edit HTML"
3. Look for the code of the first picture that looks something like this:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://9.bp.blogspot.com/-AbcdEfgh/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s1600/picture1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133"
src="http://9.bp.blogspot.com/-AbcdEfgh/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s200/picture1.jpg" width="200" /></a></div>
4. Look for part of the code that looks something like this (I've stressed and underlined it above). Copy it and paste to notepad or other editor. :
src="http://9.bp.blogspot.com/-AbcdEfgh/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s200/picture1.jpg"
5. Look at the code of the second picture and look for the part that looks something like Step #4. Copy it and paste to notepad or other editor. :
Example:
src="http://9.bp.blogspot.com/-ZyxwVuts/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s200/picture2.jpg"
6. Back to Step #3, locate the part that says "width=". After it type the following:
onmouseover='this.X' onmouseout='this.Y'
Example:
width="200" onmouseover='this.X' onmouseout='this.Y'
7. Replace X in Step #6 with the code you copied in Step #5. It will look like this:
onmouseover='this.src="http://9.bp.blogspot.com/-ZyxwVuts/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s200/picture2.jpg"'
8. Replace Y in Step #6 with the code you copied in Step #4. It will look like this:
onmouseout='this.src="http://9.bp.blogspot.com/-AbcdEfgh/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s200/picture1.jpg"'
9. The final code should look similar to this with the codes you added underlined:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://9.bp.blogspot.com/-AbcdEfgh/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s1600/picture1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="http://9.bp.blogspot.com/-AbcdEfgh/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s200/picture1.jpg" width="200"
onmouseover='this.src="http://9.bp.blogspot.com/-ZyxwVuts/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s200/picture2.jpg"' onmouseout='this.src="http://9.bp.blogspot.com/-AbcdEfgh/IjklmNopqrST/AAAAAAAAA-0/iAUL-3QE4To/s200/picture1.jpg"' /></a></div>
10. Don't forget to remove the second picture from your blog entry or else there would be two pictures displayed.
Hint: The second picture will display faster if you load a smaller size, that is, just as big or a little bigger than the display area. This is helpful to those who have slower internet connection.
Have fun with it and good luck!
tropical garden Tropical Garden tropical garden Tropical Garden
12 comments:
Hi SR, this is your first on your own outside the farm. How did you do the posting of 2 photos in one, i love it. I want to try that too, just like the 'kiasu' post, let's invite One to join.
Hi! I am here! I have taken photos like that too, focusing on different things but I didn't know how to do that mouse trick. I remember seeing this in someone else's post too. She showed completely different photos which was also very interesting. Will be more than happy to learn from you if you are willing to take Andrea and I as your disciples. :)
Hello Andrea,
Actually, those pictures are still in the farm which I took last February on my vacation.
I will post the procedure in doing the 2-in-1. It's really simple, you just need to get familiarized with the codes and you'll be an expert in no time :)
----------
Hello One,
I'll create a post of the 2-in-1 mouse trick. Hopefully it will help and hopefully too I didn't forget a step since I'm not a good teacher... LOL
I am queueing up to be your student too. I love the 'special effects'. Very interesting!
Hello Autumn Belle, Andrea and One,
I've decided to put the 2-in-1 procedure on this entry instead of a new post, just click on the link at the bottom of this post.
Thanks...
Thank you. I've read till Step 5. Will have to come back again on another day to absorb the rest. Really appreciate your sharing.
Wow! Cool trick! New kiasu posts coming soon, ladies? :)
I'm interested in this as well. My wife will have to learn this for me though. HTML is more her thing than mine.
Much welcome One. Its not complicated so I know you will be able to do it.
----------
Hello Bom,
This is just basic HTML, just follow the procedure and you'll get it. But if your wife can do it faster then why not, less work for you :)
We'll see who wins the 2-in-1 kiasu.
Hi! Thanks for this trick Solitude! I'll try it next time.
You're very welcome, Kingdom!
Thank you very much for the tutorial. I hope to try it in my future post.
Now, I have another question - how did you do the trick of hiding so much contents under the "Click here to show or hide the code" ? Please teach me!
Hello Autumn Belle. I hope my 2-in-1 tutorial helps. Have fun with this trick.
Sure, I can also teach you how to show and hide contents by clicking on a link. I'll include it in my next post.
Post a Comment