Monday, September 19, 2011

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:

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

    ReplyDelete
  2. 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

    ReplyDelete
  3. 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!

    ReplyDelete
  4. 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. :-)

    ReplyDelete
  5. 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...

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

    thanks!

    ReplyDelete
  7. 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.

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

    Thank you for your continued generosity!
    Hugs, Joanie

    ReplyDelete
  9. 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

    ReplyDelete
  10. 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/

    ReplyDelete
  11. 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! :)

    ReplyDelete
  12. 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

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

    ReplyDelete
  14. 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

    ReplyDelete