Blogging Help

Blogging Help:: Mouseover "Quick View" Before & After Pictures

I think this is my first-ever “blogging help” post, but I keep getting questions about how I do the mouseover “quick view” before and after pictures, like the one below.

Move your pointer back and forth over the picture to see how it changes from the “after” picture to the “before” picture, and then back again.

So, I thought I’d pass along this info to my fellow bloggers!

The first thing you’ll need to do is size your before and after images the same size.

MY LATEST VIDEOS

I use my Paintshop Pro program to resize the photos, and I always resize my horizontal photos to 550px wide and my vertical photos to 550px high. But you can use any photo editing program, and size them any size you want, as long as the two pictures are the same size.

Once you have both the before and the after picture the same size, you’ll need to upload these photos to a photo sharing site, such as Flickr, Photobucket, etc.

Now copy and paste the following code into the HTML of your blog post where you want the before and after quick view to show.

<center><img onmouseout=”this.src=’http://kristilinauerinteriors.com/a2d-pics/julia-kitchen-01a.jpg'” onmouseover=”this.src=’http://kristilinauerinteriors.com/a2d-pics/julia-kitchen-01.jpg'” src=”http://kristilinauerinteriors.com/a2d-pics/julia-kitchen-01a.jpg” /></center>

Now simply replace the location of my photos with the location of your own photos.  In other words, where the code shows:

http://kristilinauerinteriors.com/a2d-pics/julia-kitchen-01a.jpg

Replace that with the location of your AFTER picture.  This goes in two different places.  Be sure that you’re replacing it with a similar location that ends with .jpg, .gif, .png, or another photo format.  If you enter a .html address, it will not work.  It must be the actual photo.

And where the code shows:

http://kristilinauerinteriors.com/a2d-pics/julia-kitchen-01.jpg

Replace that with the location of your BEFORE picture.

Be VERY SURE that when you’re pasting in the locations of your own photos, that you DO NOT accidently erase any of the single or double quotation marks.  If just one of those goes missing, the code will not work.

And that’s the trick!  If you have several before and after quick views you’d like to add to one blog post, just copy and paste the code into your blog post HTML as many times as you need.

Hope that helps!!



You Might Also Like...

21 Comments

  • Reply To This Comment
    KP
    February 24, 2011 at 9:22 pm

    Thanks!

  • Reply To This Comment
    Susan
    February 24, 2011 at 9:29 pm

    Thanks for the tutorial! I'll give that a try!

  • Reply To This Comment
    EJ180
    February 24, 2011 at 9:36 pm

    I don't blog, but may start. I'll save this to my tips folder! Thanks

  • Reply To This Comment
    Holly
    February 24, 2011 at 9:38 pm

    Cool information. Thanks!

  • Reply To This Comment
    Mary
    February 24, 2011 at 10:40 pm

    You're really sweet to take the time to share this. Just one reason why I always go to to your posts first!

  • Reply To This Comment
    Kim-A Creative Spirit
    February 24, 2011 at 11:56 pm

    OOOO that is so cool. Sounds difficult for a non-techy like me. :o(

  • Reply To This Comment
    Liz
    February 25, 2011 at 1:14 am

    Thanks for that! I love tips!

  • Reply To This Comment
    Carol-Anne (Use the Good Dishes!)
    February 25, 2011 at 1:39 am

    Ok. Call me stupid, but you lost me at 'code'.

  • Reply To This Comment
    For the love of painting
    February 25, 2011 at 5:57 am

    This is awesome! I absolutely love the kitchen too!

  • Reply To This Comment
    The O's
    February 25, 2011 at 3:42 pm

    ohhh, thanks! Can't wait to see if I can figure this out! =)

  • Reply To This Comment
    Zolane
    February 25, 2011 at 4:11 pm

    Love, love, love the transformation!!! Where did you find your checked drapes?

  • Reply To This Comment
    Nancy U
    February 25, 2011 at 5:27 pm

    This tip got pasted in my Cheat Sheet. Thanks.

    You know, the more that I look at this kitchen the better I like it. Making the wainscoting go up high enough to use the top molding as a sort of revers picture rail is genius!

  • Reply To This Comment
    Kristi @ Addicted 2 Decorating
    February 25, 2011 at 5:47 pm

    Zolane, the draperies are custom.

  • Reply To This Comment
    Attiser
    February 25, 2011 at 7:05 pm

    Thanks for sharing !

  • Reply To This Comment
    Double Glazing
    February 26, 2011 at 6:50 am

    Nice. I love the transformation! Great job. What a brilliant idea.Thanks for posting this article. Impressive work!

  • Reply To This Comment
    The DIY Show Off
    February 27, 2011 at 3:28 pm

    Awesome! I've always wondered how this worked. Thank you so much for the 'how-to'. We're doing a kitchen remodel right now and I'd love to try this at the time of the reveal. 🙂

    Have a wonderful day, Kristi!

    Roeshel

  • Reply To This Comment
    painting toronto
    February 28, 2011 at 9:46 am

    Amazing information. I like your strategies. Thanks for sharing.

  • Reply To This Comment
    painting toronto
    April 10, 2011 at 8:57 pm

    Amazing information. I like your strategies. Thanks for sharing.

  • Reply To This Comment
    Attiser
    April 10, 2011 at 8:57 pm

    Thanks for sharing !

  • Reply To This Comment
    Lisa Allen
    May 28, 2011 at 2:20 am

    Thanks for the help.  I just started blogging so I need all the help I can get!

  • Reply To This Comment
    Mom Home Guide
    August 6, 2012 at 4:32 pm

    Sounds great! Hope to create some cool befoe and afters for my website!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.