jQuery悬停在imagemap上不起作用

Question

I have an imagemap and want to add a jQuery hover. 我有一个图像映射，想要添加一个jQuery悬停。 Basically the whole image shall be replaced with a new one, based on an imagemap. 基本上，整个图像应根据图像映射表替换为新的图像。 Hovering on certain parts of the image shall result in replacing the image completely. 将鼠标悬停在图像的某些部分将导致完全替换图像。 On a mouseout of the mapped areas, it shall flip back to the imagemap. 当鼠标移出映射区域时，它将翻转回到图像映射。 It works fine doing the imageflip with javascript, but I want to change it to jQuery in order to have mor control about the fadeIn and stuff like this. 使用javascript进行imageflip效果很好，但是我想将其更改为jQuery，以便对fadeIn和类似的东西进行mor控制。 It just seems easier in jQuery. 在jQuery中似乎更容易。

Here is what Ive got. 这就是我得到的。

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

First I preload the images that the imageflip works without delay. 首先，我预加载了imageflip可以正常工作的图像。 Then I delcare the jQuery function, based on the id in my imagemap and then I add the names of the pictures assigned in the preloading. 然后，我基于图像映射中的id来对jQuery函数进行delcare，然后添加在预加载中分配的图片的名称。

Buut, it does not work, at all. Buut，它根本不起作用。 Nothing is happening. 没事

Where is the mistake? 错误在哪里？

Answer 1

There are two problems: 有两个问题：

First, when you refer to $(this) in your hover handlers, $(this) is referring to your <area> elements, not your <img> . 首先，当您在hover处理程序中引用$(this)时， $(this)引用的是<area>元素，而不是<img> 。 You'll want to refer instead to $("#bosque") . 您将要改为引用$("#bosque") 。
Second, you are setting the src attribute to the actual strings verde.src , azul.src and original.src . 其次，将src属性设置为实际的字符串verde.src ， azul.src和original.src 。 It's as if you were saying <img src="verde.src"> , which is not what you want. 就像您在说<img src="verde.src"> ，这不是您想要的。 Remove the quotes from around those strings, as in: $("#bosque").attr("src", verde.src"); so that you are setting src equal to the src property of the verde object and not just to a relative URL that is broken. 除去这些字符串周围的引号，例如： $("#bosque").attr("src", verde.src");以便将src设置为等于verde对象的src属性，而不仅仅是相对URL已损坏。

So the hover section becomes this: 因此，悬停部分变为：

$(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);

      }); 
   });
});

Which only reacts to the mapped areas: 仅对映射区域做出反应：

jQuery悬停在imagemap上不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-10-16 18:01:44

jQuery悬停在imagemap上不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-10-16 18:01:44

解决方案1
1 已采纳 2014-10-16 18:01:44