(an example is at the end of the post--blogger is being a pain and won't let me move it...)
First create two images, one original image and one for when you hover over it. Make sure they are the same size.
Upload them to your image hosting site.
Copy and paste this html code wherever you would like the images to appear (your blog post, sidebar, etc).
<a href="linkurl"><img src="image1"onmouseover="this.src='image2'" onmouseout="this.src='image1'" alt="alternate text" /></a>
Replace the red colored text with your own information. Make sure you don't delete anything but the red colored text.
linkurl
image1
image2
alternate text
In the end your code should look similar to mine:
<a href="http://emilygrace-blog.blogspot.com/">
<img src="http://70.38.54.187/h/405/a0863d67-bc09-421c-9619-a73d13b283c2.jpg" onmouseout="this.src='http://70.38.54.187/h/405/a0863d67-bc09-421c-9619-a73d13b283c2.jpg'" onmouseover="this.src='http://70.38.54.187/h/405/87d54c49-7edb-413e-94d2-b7a82316df1a.jpg'" alt="Tuesday's Tips"/></a>
<img src="http://70.38.54.187/h/405/a0863d67-bc09-421c-9619-a73d13b283c2.jpg" onmouseout="this.src='http://70.38.54.187/h/405/a0863d67-bc09-421c-9619-a73d13b283c2.jpg'" onmouseover="this.src='http://70.38.54.187/h/405/87d54c49-7edb-413e-94d2-b7a82316df1a.jpg'" alt="Tuesday's Tips"/></a>
and your image should appear similar to mine:
As always, if you have any questions about this tutorial, just let me know and I'll get back to you asap. If you have any suggestions for Tuesday's Tips, I'd love to hear it. =)
In Christ,