Yippee! I learned something today!
Have you seen one of those images posted online that changes to a differenct image when you roll over it with your mouse curser? Well I wanted to do that.
I wanted to post an image I've processed with apps and/or Photoshop like this one:
And then when you roll over it with your mouse curser, I want it change to a picture of the original photo like this :
Then when you roll your mouse curser off of it again - it goes back to the FIRST IMAGE, the processed photo. Further, when you click the mouse on it, I want it to show a larger version of a the processed photo as I've always done on my blog. Too much to ask? I think not - others have done it on their blogs.
So here goes my first try:
Roll your mouse over this image to see the original photograph.
Next, Click on this image to see a larger version of it.
Woohoo! It works! NOw, want to know how to do it for yourself?
(Of course, the steps I'm giving are what I used here on Typepad - other blog sites might vary??)
1. I started writing my blog as usual on the page for composing new posts. This is called "Rich Text" on Typepad and it shows images.
2. When I got ready to put in the photo I wanted the roll over effect on, I clicked on the "HTML" tab to use the text only version of posting which shows the html language. Whatever I had already composed on this post was showing on this "HTML" page.
3. I just clicked my curser at the bottom of any text already on the html page for creating this post and put in a formula for the "mouse over image."
4. I highlighted, copied, and pasted the formula below onto my blog post html page:
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>
This formula I used was posted on Spice Up Your Blog.
5. Now You have to do some substituting in the formula to let your computer know which images you want used.
• Where it says TARGET URL GOES HERE just substitute the actual URL of the image you want the computer to go to when someone clicks on the image (in my case that was the larger image - because I wanted viewers to see a larger version of my photo when they click on the image, right?) Be careful to leave the quotation marks in the formula when you paste your URL over the words.
*Note: You can use Flickr images or any other places ONLINE that you have stored images. You can even upload images to your typepad blog - go to FILE MANAGER under the LIBRARY tab on your blog dashboard. There will be a place on that page to upload images you'd like to store there. Just go to the image you want, click on it, and copy the URL location of it so you can paste that image's URL into the formula.
• Where it says URL OF THE FIRST IMAGE GOES HERE, substutue the URL of the image you want displayed BEFORE the mouse rolls over it. (In my case that was the processed photo - my final output after processing it in apps and Photoshop.)
• Where it says URL OF THE SECOND IMAGE GOES HERE, substutue the URL of the image you want displayed AFTER the mouse rolls over it (In my case that was the original photo - the one I started with before I did any processing of it. The image just as it was when it came out of the camera.)
SECOND IMAGE
• Where it says URL OF THE FIRST IMAGE GOES HERE (The second time in the formula that it says this), substutue the URL of the image you want displayed when the mouse rolls back OFF of it. (This is the same FIRST IMAGE with the same URL as before.)
~ SUMMARY~
Kate, author of Chronicles of a Country Girl, gives a concise summary of this "Mouseo-over" technique:
Here’s the link to the trick: {Mouse-over Effect}
• Where it says TARGET URL and FIRST IMAGE: That’s where you’ll put the URL of the GOOD IMAGE, the one you want to show.
• Where it says SECOND IMAGE, that’s where you’d place your SOOC shot. (SOOC stands for "Straight Out Of Camera")
Plus, Kate has some more examples you'll enjoy seeing on her blog.
Hope you can make sense out of all this because I think blog readers would love to see more "before and afters," right?