jQuery悬停在图像映射上不起作用

我有一个图像映射并希望添加一个jQuery悬停。基本上整个图像将被替换为一个新的，基于图像映射。悬停在图像的某些部分应导致完全替换图像。在映射区域的鼠标移出时，它将翻转回映像图。它可以很好地用javascript做imageflip，但我想将其更改为jQuery，以便拥有关于fadeIn的控制权以及类似这样的内容。它在jQuery中似乎更容易。jQuery悬停在图像映射上不起作用

这是我得到的。

<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>

首先我预装了imageflip工作没有延迟的图像。然后，我根据imagemap中的id删除jQuery函数，然后添加预加载中分配的图片的名称。

Buut，它根本不起作用。什么都没有发生。

哪里错了吗？

来源

2014-10-16 Maccaroni

有两个问题：

首先，当你在你的hover处理程序是指$(this)，$(this)指的是你的<area>元素，而不是你<img>。你会想要参考而不是$("#bosque")。
其次，您将src属性设置为实际字符串verde.src，azul.src和original.src。这就好像你在说<img src="verde.src">，这不是你想要的。删除这些字符串周围的引号，如：$("#bosque").attr("src", verde.src");，以便您将src设置为等于verde对象的src属性，而不仅仅指向相对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

这使得我的映射无味的区域。无论鼠标位于何处，鼠标悬停在图像上都会改变图像。它不再尊重映射区域。我把'$（this）.attr（“src”，“verde.src”）;'改成'$（“＃bosque”）。attr（“src”，verde.src）;' '$（“＃verdeA”）。hover（function（）{'（当然，我改变了两个函数，当鼠标进入图像时出现azul图像） – Maccaroni 2014-10-16 18:25:15

也许我不够清楚 - 只是编辑了我的评论，包括我的意思和演示图像，以显示我得到的结果 – myersjustinc 2014-10-16 18:46:22

非常感谢！真棒小剪辑:)它现在就像一个魅力！问题不是你不够清楚。我改变了它，就像你一样。问题为什么它不工作的是' bosque。把'id'改成别的东西，它就起作用了。 – Maccaroni 2014-10-16 19:34:58

jQuery悬停在图像映射上不起作用

回答

相关问题