jQuery hover на imagemap не работает

У меня есть карта imagemap и вы хотите добавить jQuery hover. В основном все изображение должно быть заменено новым, основанным на карте изображения. Наведение на определенные части изображения должно привести к полной замене изображения. При выводе отображаемых областей он должен вернуться к карте изображений. Он отлично работает с imageflip с javascript, но я хочу изменить его на jQuery, чтобы иметь контроль над fadeIn и так далее. Это просто проще в jQuery.jQuery hover на imagemap не работает

Вот что я получил.

<html> 

<head> 
<!-- LINK ZU JQUERY ONLINE--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 


<script> 
//PRELOAD THE IMAGES 
original = new Image(698, 360); 
original.src = "imagenes_png/bosque_mapa.png"; 

azul = new Image(698, 360) 
azul.src = "imagenes_png/azul_mouse.png"; 

verde = new Image(698, 360) 
verde.src = "imagenes_png/verde_mouse.png"; 


//jQUERY HOVER 
$(document).ready(function(){ 
    $("#verdeA").hover(function() { 
     $(this).attr("src" , "verde.src"); 
      }, function() { 
     $(this).attr("src" , "original.src"); 
    $("#azulA").hover(function() { 
     $(this).attr("src" , "azul.src"); 
      }, function() { 
     $(this).attr("src" , "original.src"); 

     }); 
    }); 
}); 

</script> 
<body> 

<!-- INSERT THE PICTURE --> 
<img name="bosque" id="bosque" src="imagenes_png/bosque_mapa.png" width="698" height="360" border="0" usemap="#bosque_m" alt="Bosque con animales" /> 

<map name="bosque_m" id="bosque_m"> 
    <area id="verdeA" shape="poly" coords="643,324,646,322,648,321,651,320,654,320,656,321,658,323,659,324,660,327,659,330,657,332,655,334,654,335,654,332,653,329,653,327,650,326,648,328,648,331,649,332,650,334,652,335,654,337,656,338,658,339,660,341,662,342,662,345,661,348,660,350,657,351,656,351,656,346,656,345,653,347,651,350,650,351,651,353,651,354,653,356,656,356,658,356,660,356,662,356,666,354,668,351,669,349,670,347,669,346,665,346,666,342,667,341,668,340,670,339,672,339,674,341,676,344,676,347,675,351,672,355,670,357,669,360,642,360,644,356,646,353,647,350,648,346,650,340,650,337,646,332,645,330,644,327,643,324" 
alt="" /> 
    <area id="azulA" shape="poly" coords="472,249,476,249,479,250,483,251,484,255,485,258,487,261,489,263,493,265,498,266,501,268,504,270,504,271,499,270,495,269,489,268,486,269,484,270,480,269,476,268,473,266,470,262,469,260,468,256,470,253,472,249" 
    alt="" /> 
</map> 

</body> 
</html>

Сначала я предварительно загружаю изображения, которые работает с изображением, без задержки. Затем я просматриваю функцию jQuery, основываясь на идентификаторе в моей карте памяти, а затем добавляю имена изображений, назначенных при предварительной загрузке.

Buut, это совсем не работает. Ничего не происходит.

Где ошибка?

источник

2014-10-16 Maccaroni

Есть две проблемы:

Во-первых, когда вы обратитесь к $(this) в ваших hover обработчиков, $(this) имеет в виду ваших <area> элементов, а не ваш <img>. Вместо этого вы захотите обратиться к $("#bosque").
Во-вторых, вы устанавливаете атрибут src на фактические строки verde.src, azul.src и original.src. Это как если бы вы говорили <img src="verde.src">, что не то, что вы хотите. Удалите кавычки вокруг этих строк, как в: $("#bosque").attr("src", verde.src");, так что вы устанавливаете src, равный свойству src объекта verde, а не только к относительному URL-адресу, который сломан.

Так секция парения становится этим:

$(document).ready(function(){ 
    $("#verdeA").hover(function() { 
     $("#bosque").attr("src" , verde.src); 
      }, function() { 
     $("#bosque").attr("src" , original.src); 
    $("#azulA").hover(function() { 
     $("#bosque").attr("src" , azul.src); 
      }, function() { 
     $("#bosque").attr("src" , original.src); 

     }); 
    }); 
});

Что только реагирует на отображенных области:

источник

2014-10-16 18:01:44 myersjustinc

Это оставляет мою отображенная области unrespected. Наведение на изображение теперь меняет изображения, независимо от того, где моя мышь. Он больше не относится к отображаемым областям. Я изменил '$ (this) .attr (" src "," verde.src ");' to '$ (" # bosque "). Attr (" src ", verde.src);' оставив это, как было раньше '$ (" # verdeA "). hover (function() {' (Я, конечно, менял обе функции, и изображение азула появляется, когда мышь входит в изображение). – Maccaroni

Возможно, я был недостаточно ясен - только что отредактировал мой комментарий, чтобы включить изменения, которые я имел в виду, и демонстрационный образ, чтобы показать результат, который я получаю. – myersjustinc

Спасибо большое! Удивительный маленький клип там :) Теперь он работает как чары! Проблема была не в том, что вы не были достаточно ясны. Я изменил его так же, как вы. Проблема, почему он не работал, состоял в том, что ' bosque. Изменен 'id' на что-то еще, и это сработало. – Maccaroni

jQuery hover на imagemap не работает

ответ

Смежные вопросы