HTML / Javascript с наложением изображений при наведении курсора на область - PullRequest
Новая
       34

HTML / Javascript с наложением изображений при наведении курсора на область

0 голосов
/ 19 октября 2011

Итак, у меня есть изображение на странице и карта изображений, соответствующая этому изображению, затем у меня также есть два соответствующих изображения, каждое размером с первое (в основном прозрачное), которое я хочу наложить на это изображение, когда определенная область изображения карты наведен. Как мне это сделать, это то, что я могу сделать с помощью CSS, или мне понадобится JavaScript для этого?

1 Ответ

0 голосов
/ 19 октября 2011

Я думаю, что вам нужен Javascript, так как не все браузеры поддерживают псевдо-класс css hover для элементов, отличных от <a>.Вы должны быть в состоянии сделать это с минимальным Javascript.См. Тег <map>: http://www.w3schools.com/tags/tag_map.asp

Например, если вы хотите навести курсор на квадрат 100 на 100 пикселей в левом верхнем углу вашего изображения (image1.png), чтобы включить наложение изображения (image2.png): 

<script type="text/javascript">
    function area1_mouseover() {
        document.getElementById('image2').style.visibility = 'visible';
    }
    function area1_mouseout() {
        document.getElementById('image2').style.visibility = 'hidden';
    }
</script>
<img src="image2.png" id="image2" style="position: absolute; visibility: hidden; z-index: 2;" usemap="#my_map" />
<img src="image1.png" id="image1" usemap="#my_map" />
<map name="my_map">
    <area shape="rect" coords="0,0,100,100" onmouseover="area1_mouseover();" onmouseout="area1_mouseout();" />
</map>

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

...