Question

我有一个imagemap，想要添加一个jQuery悬停。基本上，整个图像将基于图像映射替换为新图像。将鼠标悬停在图像的某些部分上将导致完全替换图像。在映射区域的鼠标移出时，它将翻转回图像映射。使用javascript进行imageflip工作正常，但我想将其更改为jQuery，以便对fadeIn和类似的东西进行控制。它在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，它根本不起作用。什么也没发生。

错误在哪里？

Answer 1

有两个问题：

首先，当您在$(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);

      }); 
   });
});

仅对映射区域做出反应：

jQuery悬停在imagemap上不起作用

1 个答案: