1

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

creativeedg10
  • 691
  • 1
  • 11
  • 24

2 Answers2

0

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

Martin Jespersen
  • 25,743
  • 8
  • 56
  • 68
  • Different IDs or the same class :) – Kyle Mar 18 '11 at 13:49
  • @Kyle: If the images are all the same then yes, same class, if they are unique, then using a class will need a level of abstraction that i guess is outside the scope of this question considering the initial code from the OP – Martin Jespersen Mar 18 '11 at 13:59
0

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.

creativeedg10
  • 691
  • 1
  • 11
  • 24
  • It's OK to accept your own answer if it is the best. If other answers were helpful, you can upvote them. – KatieK Mar 18 '11 at 17:06