JQuery изображение карты эффекты при наведении - PullRequest
Новая
       3

JQuery изображение карты эффекты при наведении

1 голос
/ 21 мая 2011

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

JS: 

<script type="text/javascript">
        $(document).ready(function(){
            $('#Map area').hover(function(){
                alert('alert');
                $(this).css('border','1px solid #FF0000');
            });
        });
</script>

html: 

<div id="mainmap"><img src="images/map.jpg" alt="" usemap="#Map"/></div>
<map name="Map" id="Map">
        <area shape="poly" coords="21,326,203,316,220,141,52,153,48,182,37,193,29,220,27,241,28,255,33,259" href="#" alt="1" />
        <area shape="poly" coords="31,405,209,410,225,427,336,427,337,360,200,359,208,317,21,326,15,344,41,360" href="#" alt="11" />
</map>

Когда я наводю курсор мыши на область, она предупреждает дважды, пока я думаю, что этодолжен предупредить один раз.Также функция .css () не работает с этим селектором.

Пожалуйста, руководство, как я могу исправить

Ответы [ 2 ]

0 голосов
/ 21 мая 2011

Вам необходимо понять, что означает <map>, это простое определение областей щелчка на изображении

говоря $(this).css('border','1px solid #FF0000'); вы говорите, чтобы <map> имел сплошную границу, но <map> аналогичен <head> элементам, он содержит только определения.

Чтобы сделать границы в областях, вам действительно нужно иметь 2 изображения.

0 голосов
/ 21 мая 2011

Кажется, что когда вы перемещаете мышь в области карты, появляется предупреждение, в этот момент ваша мышь находится вне области карты, поэтому событие onmouseleave сработало, поэтому есть два alerts,если вы замените их на console.log, все будет хорошо.Проверьте это здесь: http://jsfiddle.net/8ZXb9/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...