Welcome to the 178th Metamorphosis Monday! How was your weekend? Mine was super productive. I had let a lot of things slide around here with all the preparations for the wedding and then the blog move, so today involved lots of basement cleaning, laundry, filing, organizing, plant watering, garage-light-bulb changing…you name it. It really felt good to get a few things done.
The weekend wasn’t all work, though. Yesterday, a friend treated me to an evening at The Shakespeare Tavern to see As You Like It. It was a late birthday present…late due to finding a time that worked for both our crazy schedules. If you live in the Atlanta area, you gotta check out the The Shakespeare Tavern on Peachtree Street. I called in advance to ask if I could take a few pics during the play to share with you but they said it was against the rules. (Picture below is from their website.) The tavern is a small, intimate theater and there really are no bad seats. The players interact with the audience…so much fun!
The best way to “do the tavern” is to arrive around 5:45 when the doors first open and have a glass of wine or a soda while you wait for the doors that lead into the actual theater/stage area to open. Once those open, stake out a good seat/table on the lower level, then head to the back for some of their Shakespearian fare. I had Shepherd’s Pie last night. Their bread basket is one of my faves, too. During intermission everyone heads back to the kitchen area once again to snag a serving of their popular Hot Apple Crisp with ice cream…soooo good! You can check out the menu on their site, as well as their upcoming schedule. I hope they never go out of business, I would so miss their performances if they did.
For this Met Monday, I thought I’d share a neat little photo trick I learned to do recently. This metamorphosis will probably interest Bloggers primarily, although non-bloggers may enjoy learning this little secret, too. Wish I had known how to do this long ago. It definitely would have come in handy for past “Before and Afters” I’ve shared. What am I talking about? I’m talking about that neat little effect called the “mouse-over.” Have you heard of it? I bet you’ve seen it occasionally on other blogs.
The “mouse-over” (in case you aren’t familiar) is that magical effect where a picture switches between two different scenes when you run your cursor over the picture. It’s a super way to showcase a “Before and After” of any project or room renovation/makeover. It’s probably easier to show what a “mouse-over” is than to try to explain it.
If you’ve been reading BNOTP over the past year, you’ll remember this room. This was how my current home office looked prior to its renovation into an office/craft room/sewing room. It had stripe “baseball themed” wallpaper, cream-colored carpet, a mural, ceiling fan and lots of bedroom furniture. This was my son’s old bedroom.
Here’s how it looks today. Painted walls, hardwood flooring, office furniture and a tole chandelier in lieu of the ceiling fan. Wouldn’t it be fun if you could just move your cursor over the photo of this finished room and watch it instantly turn back into a bedroom and then back into the office? Scroll on down (past this photo) to the next photo and check it out.
Run your cursor back and forth (on and off) the photo below and watch what happens. (If you are reading this via RSS or e-mail, you may need to visit the BNOTP Blog Site HERE to see the effect in action.)
Pretty cool, huh? That’s called a mouse-over. For today we can pretend we’re Samantha (Bewitched) and wiggle our collective noses. Presto/chango, we have a new room in the blink of an eye. Sure wish it was that easy to really renovate. HA! Naaah…that would take all the fun out of the decorating/design process. I definitely wish I could have done a mouse-over with the wallpaper removal process, though! (View full office renovation in this post: Pottery Barn Office Renovation, The Journey)
Here are a few more examples, just for fun. This past January, just after Christmas, I decided it was time to de-faux the family room. The fake foilage on top of the armoire and the faux tree in the corner were beginning to feel really tired.
Mouseover over the room below to see how the family room looked before I removed the plant on top of the armoire and the tree in the corner of the room. This isn’t the greatest example since I took the pic right after Christmas and the tree was still up, but I think you’ll get the idea. (View this full post here: Reforming my Faux Ways)
One more and then I’ll share how you can do this with your pictures.
Run your mouse over the picture below to see the porch during construction and now, in its finished state. Yup, hard to believe it once looked like the before picture. (View Before and After pics of porch in this post: Building a Screened-in Porch)
How to create the “mouse-over” effect with your pictures:
I had some good feedback on the tutorial I created for making a blog button with grab code, HERE, so I decided to write this tutorial basically the same way. By the way, if you were one of the dearhearts who “Google +1″ the blog button tutorial, thank you for that! Unfortunately, when I moved BNOTP from Blogger to WordPress two weeks ago, all the FB/Twitter shares and +1′s were reset to zero on every single post here at BNOTP. :(
So feel free to share and/or Google +1 this post or the Blog button post if you find them to be helpful. Thank-you in advance! :)
Okay, here goes:
There are two things you need prior to creating your mouse-over:
1. Two separate pictures (a Before and an After) of a scene/room or project, taken as closely from the same angle or position as possible
2. A place to “host” or store those two images
Let’s use as our example my office picture…it’s probably the better example of those I’ve shared in this post because both pics were taken at almost the exact same position. When you take your Before photo, if you think there’s a chance you’ll want to create a mouse-over pic later of the Before and After, pay special attention to where you’re standing when you take the photo. Then when you are ready to take the After photo, take a look once more at the Before pic and try to duplicate the angle/view as best you can. You’ll want to take both pics about the same distance from the subject, at the same height and preferably in similar lighting conditions. (Mouse over pic below for comparison)
Hosting the photos:
The Before and After photo will need to be hosted some place, just as the photos you post on your blog are hosted with Picassa (if you blog on Blogger) or with WordPress if you blog on WordPress. (I’m guessing that’s where most folks host the pics they use on their blog.)
(BTW, this has nothing to do with this tutorial, but is good info to know. If you ever move your blog from Blogger to WordPress, DO NOT delete your pictures in Picasa or from your old blog, Even though your new blog is a WordPress blog, the pics in all your old posts are STILL being hosted in Picasa and they’ll vanish from your WordPress blog if you delete them from your old blog or from Picasa.)
Now here’s where my tutorial may differ a bit from some of the mouse-0ver tutorials you’ve seen around Blogland. You can host your pics on Flickr, Photobucket or Picasa…wherever you choose. I decided to host mine on my old Blogger blog, which makes them end up being hosted in Picasa. I’m still able to access the dashboard of that blog so I uploaded the pics to a draft post I have created there just for the purpose of storing photos I use for blog buttons, party buttons and now mouse-over pics. I know you can store them directly in Picasa, but it’s so easy to just put them in a draft post, that’s the way I’ve always done it. Plus, I can easily find them if I need to later.
For WordPress blogs:
If you blog on WordPress, I’m not sure that will work…loading the Before and After pics to a draft post in WordPress to host them. The reason I say that is because I tried it and couldn’t get it to work for me. I created a draft post in my BNOTP WordPress blog, uploaded the two pics (Before and After) of the office to the draft post and saved the post, but I was never able to get the mouse-over to work. So I went back to the draft post I have saved on the old BNOTP Blogger blog and uploaded them to that draft post, saved them there and the mouseover worked great.
So, all this is to say, if you blog on WordPress and don’t have an old Blogger blog you can access or a “test” blog you created at Blogger, you’ll probably need to host your Before and After photos on Flickr or Photobucket.
Once you have your Before and After pics uploaded to a draft post in Blogger or to Photobucket or Flickr, copy the following code below to a word document. You’re going to be making some changes to the code, so copying and pasting it to a word document just gives you a place to work on it.
(You could copy and paste the code below to the post where you’ll be showing the photo, but I found it easier to work with it in a word document. This code was a bit tricky to work with because in several places there’s an apostrophe AND quotation marks all crammed up together. I found it almost impossible to see them clearly. I found it much easier to see and work with the code in a word document than in a draft post. Please do what works best for you.)
So, copy and paste the following to a word document: Please note: wordpress turns the quotation marks backwards whenever I copy and paste code into a post…so the quotation marks below are going backwards. You’ll have change them to face the normal way when you create your mouseover code. I have a screenshot further down in this post to show how your code should look.
<center><img onmouseover=”this.src=’before_photo_picture_here.jpg’” onmouseout=”this.src=’after_photo_picture_here.jpg’” src=”before_photo_here.jpg” alt=”" /></center>
Okay, let’s move on to the next step.
Once you have the code above copied to a word document, replace the BEFORE picture code (in both places) with the code that represents your BEFORE picture. Replace the AFTER picture code in the center with the code that represents your AFTER picture.
How do you get that code?
If you’ve stored/uploaded your Before and After pictures to a draft post in Blogger, follow these steps below. If you’ve stored your Before and After photo in Photobucket or Flickr, scroll on down for those directions.
Directions if your Before and After pics are stored in Blogger draft post:
Now just copy the code you’ve created to the html view of your post. Don’t forget to save it. You don’t want to lose your hard work. When you flip over to the “Visual” view of your post, you should see the mouse-over effect occur when you mouse over your picture.
Be sure to save your code before flipping over to the visual/compose side of your post. WordPress is weird and may goof up your code if you don’t.
Directions if your Before and After pictures are stored in Photobucket or Flickr:
If you uploaded/stored your Before and After pics to Photobucket, the image code you’ll need for your pics will be the one in the “direct link” box. As you scroll over your BEFORE photo in Photobucket, a box will pop up showing the direct link code as shown below. Copy that code and BEFORE code in the two places you saw in my example higher up in this post.
You’ll do the same thing for your AFTER picture except you’ll paste the direct link for the AFTER pic where you see the AFTER code in my example code.
Now just copy the code you’ve created to the html view of your post. Don’t forget to save it. When you flip over to the “Visual” view of your post, you should see the mouse-over effect occur when you mouse over your picture.
Important: Try to avoid accidentally deleting any marks or code when you are pasting in your picture code. Code is pretty unforgiving. If you accidentally delete a quotation or apostrophe, your mouse-over code will not work. No big deal if that happens, though. Just copy and paste my example code over and try it again. You’ll get it!
I’ve used Photobucket over the years but I’ve never really used Flickr. So, I’m not exactly sure where you’ll find the “direct” link code in Flickr. If you regularly use Flickr, you probably know where to look for that. I would imagine it could be called “direct code” on Flickr, too.
Here’s an actual screen shot of the code for one of my mouse over pics. It may be helpful to compare your code to mine once you have your code in place.
That’s it! You’re done! Congrats on creating your first mouse-over pic!
If you found this tutorial helpful, would so love it if you would give it a +1 in Google.
Have fun creating your mouse-over pics!
Pssst: I’ve added a few more links to each of the four categories (Summer Decor, Summer Dining, Porch Fever, Patriotic Celebrations) at the bottom of the blog.
Receive BNOTP updates right in your Inbox:
To receive the latest posts, as well as updates about upcoming blog parties, subscribe To BNOTP posts via an RSS Reader. Or, have BNOTP delivered right to your Inbox. You’ll find links to subscribe via RSS and e-mail on the right side at the top of this blog.
Reading this post via e-mail or RSS feed?
*If you are reading this via email or RSS feed, to view all the Before and Afters linked for Metamorphosis Monday, click HERE.
If you are participating in Metamorphosis Monday you will need to link up the “permalink” to your MM post and not your general blog address. To get your permalink, click on your post name, then just copy and paste the address that shows up in the address bar at the top of your blog, into the “url” box for InLinkz.
In order to link up, you’ll need to include a link in your MM post back to the party.
If you’d like to include the MM button in your post, just copy and paste the Met Monday button to your computer and unload it as you do your other photos to your post.
PLEASE DO NOT type in all caps…it spreads the links waaaay out. Thanks!
Let’s try something fun today! Please visit the person who linked before you and after you…that way everyone will get some visits. Hope you’ll visit more, of course.