• Mouseover How To

    Happy How To’s Day!

    Today, I thought I’d show ya how we make our photos move with a mouseover how to!

    First up, you’ll need to choose which two photos you’d like to use.

    (Tip: The key to really making your “presto change-o” dramatic is to shoot your before and after photos as close to the same angle as possible.)

    I’m going to use the following two photos of our (work-in-progress) master bedroom as an example.

    Photo #1 is saved as: master_bedroom_before.jpg

    Photo #2 is saved as: master_bedroom_after.jpg

    Once you’ve decided which two images you’d like to use, you’ll need to upload the them to some kind of image hosting site so that they both have their own URL addresses.

    We store our images on Photobucket, so I’m going to show you how to do it using their site, but a site like Flickr or Picasa would work the same way too.


    Here is the rollover code you’ll need to post into the html section of your blog post:


    You will be replacing the words BEFORE PHOTO URL ADDRESS CODE GOES HERE, and AFTER PHOTO URL ADDRESS CODE GOES HERE with the newly-created URL addresses of your before and after photos.

    (Tip: Sometimes, in WordPress, if you’re jumping between html and visual, the code will change and the rollover effect won’t work. Make sure you hit “save draft” while you’re still in HTML mode, before you preview it in VISUAL mode. That seems to stop it from changing the code. If you’re still having trouble, click on this link to open the code as a separate text file. Mouseover Code)

    First, upload the two photos you’d like to use to the photo hosting source of your choice. In Photobucket, you can hover over the photo once it’s uploaded and four different code options will pop up…

    You want to copy the direct link code of your before picture

    …and replace the words BEFORE PHOTO URL ADDRESS CODE GOES HERE with it, like this

    <img onmouseover=”this.src=’http://i268.photobucket.com/albums/master_bedroom_before.jpg’” onmouseout=”this.src=’AFTER PHOTO HTML CODE GOES HERE’” src=”http://i268.photobucket.com/albums/master_bedroom_before.jpg” alt=“” />

    (Tip: Make sure you replace both sets of the words BEFORE PHOTO HTML CODE GOES HERE. And, if you replace any of the quotation marks, the presto change-o will not work and you’ll have to start over.)

    Notice the AFTER PHOTO URL ADDRESS CODE GOES HERE text is still there in the middle of the paragraph above. You’ll want to replace that text with your after photo direct link code, like this:

    <img onmouseover=”this.src=’http://i268.photobucket.com/albums/master_bedroom_before.jpg’” onmouseout=”this.src=’http://i268.photobucket.com/albums/master_bedroom_after.jpg’” src=”http://i268.photobucket.com/albums/master_bedroom_before.jpg” alt=”” />

    Again, make sure you don’t replace any of the quotations or apostrophe’s or the rollover effect will not work.

    And that’s it! You’re images should now flip back and forth when folks move their cursor over them, like this…

    One last thing I wanted to mention was that an easy way for me to remember that the after photo goes in the middle of the rollover code is that you usually want that photo to be a surprise. In other words, you want it to be “hidden” in between your before photos. That way, when your blog post loads, readers will see the before photo first, and once they hover over it, pow! It switches to your after photo!


    Now it’s your turn!

    If you already know the link party drill, feel free to scroll on down and link away!

    If you’ve never linked up to a link party before, here’s how it works…

    1. Scroll down this page until you see the “add your link” button. Click it, and create a super-descriptive name for your link. Something like, “How To Make Carrot Cake”, or “Spring Wreath Tutorial”. That’ll make it easier for folks to browse through all the links.

    2. Make sure you link directly to the How-To post you’d like to share- not to the main page of your blog.

    3. If you’d like to invite some more folks to the party, feel free to slap this button at the end of your how-to post on your blog. Just copy and paste the code in the box below into the html part of your post, and voila!

    The Lettered Cottage
    <div align="center"><a href="http://theletteredcottage.net/?p=6662" title="The Lettered Cottage"><img src="http://i268.photobucket.com/albums/jj29/LaylaPalmer/How%20To/How_To_Linky_Button.jpg" alt="The Lettered Cottage" style="border:none;" /></a></div>

    Thanks for partyin’ with us, and hope you have a Happy To’sday!

    Pin It!
    Shoot Fly Shoot
    • TWEET
    • LIKE

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    93 Responses to Mouseover How To

    1. Marianne@Songbird says:
      • Layla says:
    2. Betty says:
    3. Diana says:
    4. Carla says:
    5. Skye says:
    6. Olga says:
    7. si says:
    8. Design Love says:
    9. Kelly @ View Along the Way says:
    10. Emily says:
    11. Jan says:
    12. Susan says:
    13. Crystal (theweekendhomemaker.com) says:
    14. Andrea says:
    15. Andrea at Opulent Cottage says:
    16. Michell Kaul says:
    17. Fairfield House says:
    18. Charcoal and crayons says:
    19. Lisa@Fern Creek Cottage says:
    20. ColleenwithMurals&More says:
    21. Erica Hyatt says:
    22. Leanne says:
    23. liz says:
    24. Sharyl@Thelittlebrownhouse says:
    25. Kate @ Chic on a Shoestring Decorating says:
    26. Daune says:
    27. angie at junkgarden says:
    28. diana sutherland says:
    29. Molly @ A New Nest says:
    30. Deb-IL says:
    31. Ami w/AliLilly says:
    32. Karen says:
    33. Carmella says:
    34. Lisa says:
    35. Diane@InMyOwnStyle says:
    36. Rebecca says:
    37. Tammy says:
    38. Mimi says:
    39. Becca says:
    40. Screaming Meme says:
    41. Vintage Inspired by Sofia says:
    42. Kaye says:
    43. Vivienne @ The V Spot says:
    44. Centsational Girl says:
    45. Erin T. says:
    46. Sarah Ives says:
    47. aLi R. says:
    48. Laura says:
    49. Madigan at madiganmade says:
    50. Silvia says:
    51. Debra says:
    52. maggie says:
    53. Cait @ Hernando House says:
    54. Julie says:
    55. Emily says:
    56. Stephanie says:
    57. becca d says:
      • Kevin says:
    58. debbie says:
    59. Life with Kaishon says:
    60. Rosa @ flutterflutter says:
      • kev says:
    61. Heather N says:
    62. Natalie@Beach House in the City says:
    63. Jenny says:
    64. Sheri Martin says:
    65. Lee says:
    66. Shari Sunday says:
    67. Lisa says:
    68. Elisabeth says:
    69. Kathy says:
    70. kelly says:
    71. Aaron Zapata says:
      • Layla says:
      • Aaron Zapata says:
    72. Mindy says:
    73. Angie Meyer says:
    74. Cindy G says:
    75. donna says:
    76. Sarah says:
      • Layla says:
    77. [email protected] says:
    78. Rene' @ BargainHootLiving says:
    79. Angeline says:
    80. Mindi says: