Link a JS rollover image

I have been trying to create a simple rollover image, and I have done so with CSS and JavaScript methods. However, I cannot get this image to link.

In the CSS version (as viewed below), I was using background images, and the link was not recognized in the "empty" HT开发者_如何学JAVAML block.

In the JS version, the images are being called from the images folder. Like the CSS, the link is not recognized in the "empty" HTML block. The moment I put an image in the HTML block, my rollover stops working.

I currently have the following in my HTML code. The rollovers work, but the link does not:

<div class="quick-map"><a href="Services/FloorPlan.aspx" onclick="window.open(this.href);return false;">&nbsp;</a></div>

In this example, the link works, but the rollovers do not:

<div class="quick-map"><a href="Services/FloorPlan.aspx" onmouseover="document.MyImage.src='images/quick-map.png';" onmouseout="document.MyImage.src='images/quick-map-over.png';"><img alt="" src="images/quick-map.png" /></a></div>

Any suggestions would be greatly appreciated. This has got to be something so simple, and I just don't understand why it's not working. I could have sworn I was doing this correctly...

Try to use this:

<div class="quick-map">
 <a href="Services/FloorPlan.aspx" onmouseover="document.getElementById('MyImage').src='images/quick-map.png';" onmouseout="document.getElementById('MyImage').src='images/quick-map-over.png';">
  <img alt="" src="images/quick-map.png" id="MyImage" />
 </a>
</div>

Remember that id needs to be unique per page, so if you have multiple images they need different ids

I just figured it out. Turns out that I have to also give a display: block with width and height to the <span> tag in addition to the images I am referencing in my CSS. I knew it was something simple...thank you all for your help.