Tutorial: Mouseover Effect

I've got a really fun tutorial for you today!
Quick and easy too!!

Its a Mouse (hover) over effect that will leave your readers fascinated.
I used it today on my personal blog, to show off my the Quiet Book I made for my son's birthday.

See! Pretty cool, huh!!

So what you'll need is two photos, taken at about the same angle for a more dramatic effect.

Photo 1 - the before

Photo 2 - the after

1. Upload both of those photos to Photobucket.

2. Then add the following code to your post's HMTL (click the edit HTML tab in your post editor):

<img onmouseover="this.src='BEFORE PHOTO DIRECT LINK GOES HERE'" onmouseout="this.src='AFTER PHOTO DIRECT LINK GOES HERE'" src="BEFORE PHOTO DIRECT LINK GOES HERE" alt="" />

3. Next copy the before photo's DIRECT LINK and paste it in the two pieces of code.
4. Then copy the after photo's DIRECT LINK and paste it in the remaining piece of code.

So my tic-tac-toe photo code looks like this now:

<img onmouseover="this.src='http://i523.photobucket.com/albums/w351/laurenjh04/BlogPosts/tictac1.jpg'" onmouseout="this.src='http://i523.photobucket.com/albums/w351/laurenjh04/BlogPosts/tictac2.jpg'" src="http://i523.photobucket.com/albums/w351/laurenjh04/BlogPosts/tictac1.jpg" alt="" />

NOTE: Make sure you don't move or delete any of the quotation marks or apostrophes or the mouse over effect will not work.

That's it!! Have fun. :)