CoffeeShop Blogging UnWrapped Tutorial: Before/After Blog Photo MouseOver Tutorial!

We are finally getting some rain in Texas and the threat of wildfires in our area has been drastically reduced.  Oh, I can't tell you how much we loved watching that rain pour down...  We are still in a horrible drought, but thankfully the hot dry summer is almost over and we might start getting more rain.

I have been wanting to post before/after images using the mouse-over technique on my blog (dangle your mouse over the image below and it will "magically" change to the after image), however I had not found an easy way to do it. Finally I figured out a simple method that I wanted to share with you. This effect should work in all computer browsers and is incredibly easy.

I used the CoffeeShop ButterScotch Vintage action on this image, no adjustments necessary.  I think this is my favorite tinted action.




Copy this code and paste it in NotePad or Text Edit. If you paste it in Word or Open Office, make sure there is no weird editing going on (extra spaces, tabs, etc.).

<a href="URL where you want people to go if they click on your image"><img src="First Image URL" onmouseover="this.src='Second Image URL'" onmouseout="this.src='First Image URL'" /></a>

Replace the "URL where you want people to go if they click on your image" with any website, blog or page address you want people directed to if they actually click rather than dangle over your image.  I linked this image to my blog.

Upload two images that are the same size to your favorite hosting site (I love using Picasa) and grab the direct link URL's. This is the web address that goes directly to each image.

Replace 'First Image URL' in both places in the code with the URL of your first image. Replace 'Second Image URL' with the URL of your second image. Don't forget the '' around each URL and don't add extra spaces.  You have to link the first image twice, the second only once.

Your code might look something like this:

<a href="http://www.thecoffeeshopblog.com/"><img onmouseout="this.src='https://lh5.googleusercontent.com/before.jpg'" onmouseover="this.src='https://lh5.googleusercontent.com/after.jpg'" src="https://lh5.googleusercontent.com/before.jpg" /></a>

Once you have added the four URL links, just paste the code in the Edit HTML in your blog post.  Now when readers hold their mouse over your "before" image, they should see it magically change to the "after".

Easy, right?

Want all of my favorite CoffeeShop Actions or Design Elements in one simple download AND help support this blog? Just click here for my action pack or here for a download of some of my most popular design elements, storyboards, and textures.

15 Comments:

Staci Brock September 19, 2011 at 5:30 PM  

Ok, that is just plain cool!!! Can't wait to use!!!

Nikon Fan September 19, 2011 at 5:48 PM  

Awesome, thanks Rita. It works great as you can see from my blog post here: http://grisierphoto.blogspot.com/2011/09/before-and-after.html

Moms Who Click September 19, 2011 at 5:56 PM  

Thank you for always sharing your tips and tricks. This is a very clever one, we'll have to try it and send our example to you!

Amarie September 19, 2011 at 9:13 PM  

Thanks for the tutorial! Also, if you have Adobe Dreamweaver, there's a function where you just add your links and it creates the code for you. But I like your way, because we all don't have Dreamweaver. :-)

J.Lynn Greenwood September 19, 2011 at 11:01 PM  

This is really cool, but I'M SO FRUSTRATED!! I cannot find the URL anywhere on Picasa's site!! What the heck am I missing, this is embarrassing, I'm an certified IT person and I know so much about this stuff. I'm going to just chalk it all up to the fact that I'm 8 months pregnant....

Please tell me what I'm overlooking, this has to be amazingly simple...

chwilka13 September 20, 2011 at 6:22 AM  

it works!
http://naswietlone.blogspot.com/2011/09/beforeafter.html

thanks!

Rita September 20, 2011 at 8:54 AM  

J. Lynn, just click on the image to make it go on its own page and then right click on it and there should be something on the menu that saves copy image location.

Joanie September 20, 2011 at 1:47 PM  

This LOOKS easy... now let's see if I can make it work!

Thank you for your continued generosity!
Hugs, Joanie

Butterfly Kisses Photography September 21, 2011 at 7:49 AM  

Boo, I can't get it to work! :( It should work with flickr, right? And I grabbed the link and not the code, so I'm really not sure what my problem is. Back to figure it out. Thanks for the tutorial though! I'm sure it's just operator error! ;)

Carmen

April Derrick September 21, 2011 at 10:54 AM  

Rita - thank you so much for the wonderful tutorial and all that you do! I love your actions!! I made a blog post about you and your actions today - http://memoryvilla.com/blog/addicted-to-photo-actions/

Canon Kristin September 21, 2011 at 4:30 PM  

Love this! I love seeing before and afters on pics and this is a great way to do it! I would love to see more pics displayed this way! :)

J.Lynn Greenwood September 24, 2011 at 8:37 PM  

Thanks Rita!! :)

Kristin October 15, 2011 at 11:45 PM  

Thanks so much for the tutorial, but I couldn't seem to get it to work right! Instead of seeing the picture, I just saw a little box with an x in it. I found another great tutorial here (http://www.kimklassencafe.com/thecafe/before-after-mouse-over-video-tutorial.html) for those who experienced the same problem. Here are some before/after pics that I posted on my blog if you want to check them out :)

http://kristin-korner.blogspot.com/2011/10/actions-before-and-after.html

http://kristin-korner.blogspot.com/2011/10/vintage-princess.html

Jennifer Norch October 18, 2011 at 7:41 AM  

I can't figure out how to make this work with pictures hosted on flickr. Can someone help me?!?!

Butterfly Kisses Photography November 27, 2011 at 10:31 PM  

Thx Rita! I finally sat down and figured it out. I originally tried flickr, but could never get it to work, so I ended up using photobucket. Seems to work better when trying to grab the link. I also figured out your blogger header slideshow! Thx for all you do!

http://www.butterflykissesphotographyonline.com/

Carmen