Как наложить прозрачный PNG поверх изображения / при наведении на другой элемент /

Question

У меня есть веб-страница с изображением контента.На этом изображении я хочу выделить несколько различных элементов, вызванных тем, что пользователь переворачивает соответствующий элемент в тексте на той же странице.подсветка.Я знаю, как сделать наложение СТАТИЧЕСКИ, используя теги span (как объяснено здесь ).

Но я не знаю, как отобразить определенный оверлей, ТОЛЬКО КОГДА пользователь переворачивает какой-то конкретный фрагмент текста.Чтобы визуализировать то, что я пытаюсь сделать, представьте изображение, которое показывает карту London Tube.Я хочу, чтобы над конкретной станцией появлялась желтая подсветка, когда в тексте указатель мыши находится над названием этой станции.

Будем весьма благодарны за любые предложения, примеры или связанные учебники!

Мэтт

Answer 1

Это должно работать.Просто замените SPAN тегами изображений PNG.Вы также можете использовать блок отображения вместо встроенного отображения для изображений.

Answer 2

в приведенном вами примере ссылки вы можете сделать что-то вроде этого.

в вашем CSS

.photo {
    margin: 30px;
    position: relative;
    width: 180px;
    height: 130px;
    float: left;
}
.photo img {
    background: #fff;
    border: solid 1px #ccc;
    padding: 4px;
}
.photo span {
    width: 20px;
    height: 18px;
    display: block;
    position: absolute;
    top: 12px;
    left: 12px;
    background: url(images/digg-style.gif) no-repeat;
}

с использованием jquery

$(document).ready(function(){
    $(".photo span").hide();  // initialize the span as hidden

            // only show the span on hover
    $("a.mapper").hover(
        function(){
            var aHash = $(this).attr("href").split("#")[1];
            $("#"+aHash).show();
        },
        function(){
            var aHash = $(this).attr("href").split("#")[1];
            $("#"+aHash).hide();
        }
    );
});

и HTML

<div class="photo">
    <a href="#">
        <span id="map1"></span>
        <img src="photo.jpg" />
    </a>
</div>

<a href="#map1" class="mapper">map1</a>

Объясните:

1. в тегах HTML, добавьте id к каждому диапазону, который вы хотите отобразить, и скройте при наведении
2. в текстовых ссылках.поместите хеш-ссылку, которая соответствует идентификатору, который вы хотите показать при наведении.
3. используйте функцию наведения jquery для отображения и скрытия наложения диапазона.