Javascript imagemap上的jQuery悬停不起作用_Javascript_Jquery_Html

Javascript imagemap上的jQuery悬停不起作用

javascript jquery html

Javascript imagemap上的jQuery悬停不起作用,javascript,jquery,html,Javascript,Jquery,Html,我有一个imagemap，想添加一个jQuery悬停。基本上，整个图像应根据imagemap替换为新图像。将鼠标悬停在图像的某些部分将导致完全替换图像。在地图区域外的鼠标上，它应翻转回imagemap。使用javascript进行imageflip可以很好地工作，但我想将其更改为jQuery，以便mor能够控制fadeIn以及类似的内容。在jQuery中似乎更简单这是我得到的 <html> <head> <!-- LINK ZU JQUERY ONLINE--&

我有一个imagemap，想添加一个jQuery悬停。基本上，整个图像应根据imagemap替换为新图像。将鼠标悬停在图像的某些部分将导致完全替换图像。在地图区域外的鼠标上，它应翻转回imagemap。使用javascript进行imageflip可以很好地工作，但我想将其更改为jQuery，以便mor能够控制

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>


//预加载图像
原始=新图像（698360）；
original.src=“imagenes\u png/bosque\u mapa.png”；
azul=新图像（698360）
azul.src=“imagenes\u png/azul\u mouse.png”；
verde=新图像（698360）
verde.src=“imagenes\u png/verde\u mouse.png”；
//jQUERY悬停
$（文档）.ready（函数（）{
$（“#verdeA”）.hover（函数（）{
$（this.attr（“src”，“verde.src”）；
}，函数（）{
$（this.attr（“src”，“original.src”）；
$（“#azulA”）.hover（函数（）{
$（this.attr（“src”，“azul.src”）；
}，函数（）{
$（this.attr（“src”，“original.src”）；
}); 
});
});

首先，我预加载imageflip可以毫不延迟地工作的图像。然后，我根据imagemap中的id删除jQuery函数，然后添加预加载中指定的图片的名称

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

错误在哪里？

有两个问题：

首先，当您在

悬停处理程序中引用$（this）
时，$（this）
指的是
元素，而不是实际字符串verde.src
、azul.src
和original.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);

      }); 
   });
});

仅对映射区域作出反应：
这会使我的映射区域不被检测。现在，无论鼠标在哪里，悬停在图像上都会更改图像。它不再尊重映射区域。我将$（this.attr（“src”，“verde.src”）；
更改为$（“#bosque”）.attr（“src”，verde.src）
保持原样$（“#verdeA”）。悬停（函数（）{
（我当然更改了这两个函数，当鼠标进入图像时会出现蓝色图像）。也许我不够清楚——只是编辑了我的评论，以包括我想要的更改和演示图像，以显示我得到的结果。非常感谢！那里有一个很棒的小剪辑：）它现在像一个魔咒一样工作！问题不是你不够清楚。我像你一样更改了它。它不工作的问题是bosque。将id
更改为其他东西，它工作了。