Tuesday, July 12, 2011

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. :)


  1. I've been blogging for about a year, but I don't have a clue what any of the HTML codes mean...or how to really use them! A post specifically on HTML would be really useful!!

  2. Thanks for posting this, i have been wondering how to do it for awhile now! Thanks again.
    Dream Book Design

  3. I just found your blog and I love this tutorial. I have always wondered how to do this.

  4. Thanks for posting this - that's way too cool! I've also got this linked to my "blogging" post too today, thanks again!