This is a nice easy way to create a rollover image in your WordPress site without touching any CSS. Just insert your information in the places below.
<a href="#" target="_top" onmouseover="document.sub_but.src='http://www.yourdomain.com/your-rollover-image.jpg'"onmouseout="document.sub_but.src='http://www.yourdomain.com/your-default-image.jpg'" > <img src="http://www.yourdomain.com/your-default-image.jpg" width="447px;" height="206px;" alt="" name="sub_but"> </a>
Also, note that if you have more than one rollover image on a page, you will need to change the name slightly to something like “sub_but2”. See below:
<a href="#" target="_top" onmouseover="document.sub_but2.src='/images/junk_15yds.jpg'"onmouseout="document.sub_but2.src='http://www.mrcheapeeinc.com/blog/wp-content/uploads/2012/07/15yddumpster.jpg'" ><img src="http://www.mrcheapeeinc.com/blog/wp-content/uploads/2012/07/15yddumpster.jpg" width="447px;" height="206px;" alt="15 Cubic Yard Open Top Dumpster" name="sub_but2"></a>
Thanks to: http://wordpressfaq.org/site/rollover-buttons-and-images/