Upload 2 images, edit in HTML mode and cut away everything except the file names/URL's from the first image reference (the smaller image with s320, s400 will give poor results). Use the s1600 size if possible. The image URL you want to keep looks something like this: http://4.bp.blogspot.com/_yYnydmbc6Ss/TAXh6xN1yzI/AAAAAAAAZwY/TsAC2pwqG-I/s1600/imagename.jpg
Paste the first image URL in the 2 URL locations indicated below and the second image URL in the center (IMAGE #2) spot. Insert YOUR blog URL at the beginning of the line of code and editing is complete. Image #1 is the image that is shown by default and image #2 is the mouseover image.
<a href="BLOG URL HERE"><img src="IMAGE #1 HERE" onmouseover="this.src='IMAGE #2 HERE'" onmouseout="this.src='IMAGE #1 HERE'" width="400" /></a>
With all pasting complete, it should look something like this:
<a href="yourblogname.blogspot.com"><img src="http://4.bp.blogspot.com/_yYnydmbc6Ss/TAXh6xN1yzI/AAAAAAAAZwY/TsAC2pwqG-I/s1600/firstimage.jpg" onmouseover="this.src='http://4.bp.blogspot.com/_yYnydmbc6Ss/TAXh6xN1yzI/AAAAAAAAZwY/TsAC2pwqG-I/s1600/secondimage.jpg'" onmouseout="this.src='http://4.bp.blogspot.com/_yYnydmbc6Ss/TAXh6xN1yzI/AAAAAAAAZwY/TsAC2pwqG-I/s1600/firstimage.jpg'" width="400" /></a>
Paste the above code with all the edits into your blog entry (edit in HTML mode), publish and you are done! Mouse over the image and you should have a nice surprise in store. The width tag at the end can be changes to suit your needs. For me 400 wide works well on a verticle shot and 500 wide works for a horizontal shot. If you don't keep the width tag your image will not correctly display, showing only about half its width.
If the above code does not work, try this one:
<img alt='Image01' onmouseover="this.src='IMAGE #2 HERE '" src="IMAGE #1 HERE " onmouseout="this.src='IMAGE #1 HERE '" width="400" />