How to Use the 'Mouse Over' Technique...

Credit where credit is due...
this fun 'mouse over' image is thanks to this site here.

So many of you have been admiring/enjoying/commenting on my use of the 'mouse over' technique to show the before and after of images of my digitally edited software so I decided I would share the technique in a post.

I used to just link people who asked about it to Kim Klassen's website because that is where I learned the technique.  Kim generously shares (for free) so many wonderful tips and tricks, as well as beautiful textures, and one of them was this mouse over technique.  

Kim also has many amazing workshops and online courses which I can highly recommend.  I have taken Photoshop: the Essentials, and am currently enjoying Beyond Layers.  (Please note that for obvious reasons I would never share a lesson or technique taught in a class that has a fee attached to it!)

Okay, back to the 'mouse over'.  First of all, you need to upload your images (before and after) to a web based site like Flickr or Picasa (those are the ones I use) because you are going to need the image URL (which you can obtain by right clicking on the image once it's in those web based sites).

Next, you need the following code (copy and paste everything between the squiggly lines into a blank document and save it on your computer...Go ahead, do that now...I'll run and get another coffee while I wait...):  Important:  part way down in the code you will see http://lindakittmer.blogspot.com/ which is MY blog URL.  Replace my blog URL with your own, and then save the document.  Do this now so that you only have to do it once and not every time you use the code!  Be careful not to delete the punctuation as computer code is not forgiving.  You must maintain the exact syntax or it won't work.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">

<br /></div>

<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>

<tr><td style="text-align: center;"><a href="http://lindakittmer.blogspot.com/" style="margin-left: auto; margin-right: auto;"><img onmouseout="this.src='http://farm8.staticflickr.com/7059/6866348739_39f5e72a84_z.jpg'" onmouseover="this.src='http://farm8.staticflickr.com/7066/6866348525_2b0a727255_z.jpg'" src="http://farm8.staticflickr.com/7059/6866348739_39f5e72a84_z.jpg" /></a></td></tr>

<tr><td class="tr-caption" style="text-align: center;">Mouse over photo to see the 'before' image.</td></tr>

</tbody></table>

</div>

<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">

<br /></div>

<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">

These next two lines aren't part of the code, but you want to copy and paste them into your document to remember what goes where: 

first and third photo addresses are the “after” images

second photo address is the “before” 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Okay, now to actually put it into your post...

You'll notice that you can either post by using 'Compose' or 'HTML' (I'm using blogger...sorry I don't know about other blog interfaces).  You'll see the two buttons on the left in the tool bar of the post screen.  Go ahead and start writing your post as you usually would.  When you want to add the photos, click on the 'HTML' button.  You should see what you have typed so far, along with computer code for spacing, etc.  

Open that document you saved with the above code, highlight and copy the code, and then come back to your post.  Put your cursor where you want the image to appear (that should be below what you have written so far) and paste the code.  

Now you have to substitute your images URLs for mine (since that's what you've got in the sample code).  Go to Picasa, Flickr or where ever you uploaded your photos, and right click on the after image.  Copy the code.  Come back to your blog post in progress, and find the first place that you see an image URL (http://farm8.staticflickr.com/7059/6866348739_39f5e72a84_z.jpg).  Carefully highlight it (remember the warning above about computer code syntax) and paste your own image URL in place of mine.  Now, scan down and find the THIRD place you see an image URL and repeat the highlight paste with the same URL.  

Go back to Picasa, Flickr or where ever you uploaded your photos, and right click on the before image.  Copy the code.  Come back to your blog post in progress, and find the second place that you see an image URL.  Highlight and paste to over write my image URL with your own.

Do your happy dance...you're done!!!

It may seem complicated, but once you've done it once or twice you'll find it pretty straight forward.  Perhaps you'll want to print these instructions out so that you can follow along, step by step, for the first few times until you feel confident.  

I look forward to seeing your 'mouse over' before and afters in your future posts!  Please leave me a comment with your link so I can come and check them out.  Thanks!