Ссылка JS ролловер изображение

Question

Я пытался создать простое изображение ролловера, и я сделал это с помощью методов CSS и JavaScript. Однако я не могу получить это изображение для ссылки.

В версии CSS (как показано ниже) я использовал фоновые изображения, и ссылка не была распознана в "пустом" HTML-блоке.

В версии JS изображения вызываются из папки images. Как и CSS, ссылка не распознается в "пустом" HTML-блоке. В тот момент, когда я помещаю изображение в блок HTML, мой ролловер перестает работать.

В настоящее время у меня есть следующее в моем коде HTML. Ролловеры работают, но ссылка не работает:

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

В этом примере ссылка работает, а ролловеры - нет:

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

Любые предложения будут ценны. Это должно быть что-то очень простое, и я просто не понимаю, почему это не работает. Я мог бы поклясться, что делал это правильно...

Answer 1

Попробуйте использовать это:

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

Помни что id должен быть уникальным для каждой страницы, поэтому, если у вас есть несколько изображений, им нужны разные идентификаторы

Answer 2

Я просто понял это. Оказывается, я должен также дать дисплей: блок с шириной и высотой <span> тег в дополнение к изображениям, на которые я ссылаюсь в моем CSS. Я знал, что это было что-то простое... спасибо всем за вашу помощь.