HTML fun: mouseover tutorial

I have been sitting on this tutorial ever since I read through SouleMama archives many months back.
Until I started tagging my images over in my personal blog, the mouseover trick had been collecting dust under the depth of a mile long Read-It-Later list.
Then I discovered and started playing with HTML codes (it's so fun!), and the tutorial was dug up and put on top priority list, just waiting for the right moment.
The moment came with Kecil's birthday and our weekend outing for the celebration. You can check out the post here, or you can use the image above. I simply cut and paste the whole code, so it's the same image.

Still don't know what I'm talking about? Try moving your mouse over the image above, and take the mouse out of range of the image. You see what I'm talking about now? Cool ya?

Here's how I did it:

• First you need to prepare 2 images of the same dimensions, which you can either upload to image hosting of your choice (I usually upload mine to Picasa, since I can then place the image into my blog post very conveniently using the Blogger WYSWYG editor)
• Place the first image into your post 
• Then go to edit HTML
• You want to locate the line below:
• <img border="0" height="320" src="http://image1.JPG" width="256" />
• Add the following addition anywhere within the <img .... /> onmouseover="this.src='http://image2.jpg'  "
  onmouseout="this.src='http://image1.jpg' "
• Your line should now be something like this: <img border="0" height="320" src="http://image1.JPG" width="256" onmouseover="this.src='http://image2.jpg'  " 
  onmouseout="this.src='http://image1.jpg' " />
• which will give you Image 2 when your mouse hover over the image area, and Image 1 when your mouse is else where.

Just a few notes:
- Ensuring that your original 2 images are of the same dimensions will prevent any distortion
- I find that using Blogger original HTML codes as my base works well with me as a newbie since I don't really have the confidence to write from scratch. This is why I mainly use the WYSWYG editor and then just modify the code bit by bit.

Have fun!