I have been asked a couple different times on how to achieve the hover over effect. To be honest, I couldn't figure it out myself, so I asked my blogging buddy, Sarah to help us out.
------------------------------------------------------------------------------------------------------------------
Hello everyone. I am Sarah and I write over at Naptime Momtog. I am so honored that Misty asked me to guest post this week.
I am going to show you how to do the hover over trick like on the photo below.
------------------------------------------------------------------------------------------------------------------
<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>
What you will do is put in in your WEBSITE URL in the TARGET URL that way is someone clicks on the photo it will just bring them back to your home page. Then you will put in the IMAGE URL you want to show up on the post. Next you will put the IMAGE URL that you want to show up when you hover over the image. Lastly you will put in the IMAGE URL that you want to show when you mouse off. The blue ones should be the same. See below to see what my code looks like.
<a href="http://naptimemomtog.com"><img src="http://naptimemomtog.com/wp-content/uploads/2011/10/ntmtDSC_4973edit.jpg" onmouseover="this.src='http://naptimemomtog.com/wp-content/uploads/2011/10/ntmtsoocDSC_4973.jpg'" onmouseout="this.src='http://naptimemomtog.com/wp-content/uploads/2011/10/ntmtDSC_4973edit.jpg'" /></a>
Make sure you enter the code into the HTML Draft mode of your blog post. That is it. Pretty easy. If you have any questions feel free to email me.
------------------------------------------------------------------------------------------------------------------
Ok, so you know I have to try it myself. Hover over the image to see the SOOC.
Woo hoo! It works! Sarah did have to explain to me how to obtain the IMAGE URL though. :) (By the way, IMAGE 1 is the image you want people to see first. IMAGE 2 is the image you want people to see when they hover over the image.) To find your IMAGE URL, you first have to upload your photo to the web whether a photo hosting site or whatever. View the image full size and then right click on the image and click "Copy Image Location". Easy Peasy right?!
Thank you so much, Sarah! I knew I could count on you!
If you have any other questions you would like to see a tutorial written on, please let me know and I will write up a tutorial for you or find someone who can. :)
8 comments:
Looks great. Thanks again for having me. Love your after shot. Awesome edit.
useful tip! thanks!
THANKS FOR THE TUTORIAL!
I always love this trick- I have yet to get it to work for me. Maybe it's time I give it another try :)
Love your final image- I ALWAYS love seeing the before & after shots- it really helps us newbies to know what a good SOOC image looks like & where it can be taken in processing.
I can't get it to work either...if anyone knows the Wordpress trick please let me know. (I also have been having issues commenting through my Open ID on Blogger, bummer!)
Great tutorial!! I've wondered how to do this! Thanks.
Thank you so much for this tutorial.
Neat! Thank you so much for the tutorial, maybe next time you can teach us or tell us how did you process the image and got that really neat effect? Thanks!
Post a Comment