Change image on rollover

[tis ✻ bry]

Put this in the wrong board at first, very sorry! 

Anyway, So I'm building an "of the months" box for a site I'm on, in the main header, and I want to make it so that I can customize each OTM banner while at the same time display the award. So, I came up with this idea on how: have one image display with the award name on it, when one first visits the page, then on mouseover, rollover, or click, it displays a personalized one for the winner of the category. Is there any way to do this with Javascript/CSS? I know the basic a:hover CSS code but obviously that doesn't work XD
Any help would be appreciated!

Here's the basic: (url: http://i1091./i394/SaltierCracker96/GothamHigh/5efad71e-e2dd-416e-a4d2-1a5128d366d4_zpsd1b1f0f4.jpg )

and a sample alternate for now: (url: http://i1091./i394/SaltierCracker96/GothamHigh/TBD_zpsd6cf3b43.png )

If it helps any, here's the code for what I have set up as of now:
<style type="text/css">.wildotm {width:80px; height:205px; background:url('http://i1091./i394/SaltierCracker96/GothamHigh/5efad71e-e2dd-416e-a4d2-1a5128d366d4_zpsd1b1f0f4.jpg'); float:left; margin-right:1px}

.wildotm a:hover {background:url('http://i1091./i394/SaltierCracker96/GothamHigh/TBD_zpsd6cf3b43.png');}</style>

<a href="gothamhighschool.freeforums.net/index.cgi"><div class="wildotm"></div></a>


EDIT: Fixed inconsistencies o.O

[Peter]

You could just apply the :hover pseudo-selector to the div. If I remember correctly, IE 6 doesn't support non-anchor elements. If that's not an issue, then drop the anchor and apply to the div instead.

.wildotm:hover