Сочетание наведения курсора мыши с изображением-картой

Я пытаюсь создать эффект наведения курсора мыши, где элемент onMouseOver представляет собой одно изображение с тремя отдельными ссылками.

Я использую стандартный эффект onMouseOver, onMouseOut и пытаюсь объединить его с картой изображения как этот.

Самое близкое, что я могу получить, - это эффект MouseOver, при котором ссылки отображаются только тогда, когда изображение находится в onMouseOut, и не показывают ссылки, когда оно находится в onMouseOver. Короче говоря, есть ли способ объединить эти два эффекта, чтобы он отображал ссылки карты изображения на изображении onMouseOver, чтобы два эффекта работали вместе?

Вот пример, показывающий проблему, которую я пытаюсь решить. Чтобы полностью понять суть проблемы, попробуйте медленно навести указатель мыши на изображение сверху вниз.


javascript html css mouseover imagemap
person Terence Cudney    schedule 19.12.2012    source источник
comment
было бы полезно, если бы вы включили код, который у вас есть до сих пор   -  person Wim Ombelets    schedule 19.12.2012

Ответы (1)


arrow_upward
0
arrow_downward

Лучший способ сделать что-то подобное — использовать CSS и селектор :hover.

image {
   background-image:url('image1.png');
}

image:hover {
   background-image:url('image2.png');
}

Конечно, здесь вам понадобятся дополнительные стили и правильно подобранные элементы, чтобы все работало так, как вы хотите.

person mkey    schedule 19.12.2012