Image With Hover Effect

In the midst of deleting a page, I thought I would share this code with everybody about how to have an image change on the hover. Which means, the image looks one way and when your mouse is over the image it changes to another image.

I found this easy simple code via Spice Up Your Blog website. Out of the ones I found, this one was the easiest and it also worked without being tweaked or changed.

For an example I put one of the old buttons from the Keep In Touch page (that is now gone) to show you what it looks like with and without the hover effect below.

<a href="URL GOES HERE" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank" title="HOVER TITLE GOES HERE"><img onmouseout="this.src='IMAGE 1 URL GOES HERE'" onmouseover="this.src='IMAGE 2 URL GOES HERE'" src="IMAGE 1 URL GOES HERE" /></a>



As you can see the Tumblr button is dark colored and when you run your mouse over, it turns the Tumblr blue color!