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

Question

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

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

В версии JS изображениявызывается из папки изображений.Как и 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

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

Answer 2

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

<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 должно быть уникальным для каждой страницы, поэтому, если у вас есть несколько изображений, им нужны разные идентификаторы