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
