Link a JS rollover image

Question

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" HTML 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...

Answer 1

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

Answer 2

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.