Блог

Главная - Вопросы по программированию - эффекты наведения на карту изображений jquery

эффекты наведения на карту изображений jquery

#jquery #html #maps

#jquery #HTML #Карты

Вопрос:

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

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(), похоже, не работает с этим селектором.

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

Ответ №1:

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

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

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

Ответ №2:

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