0

I have an imagemap and want to add a jQuery hover. 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. It just seems easier in 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. 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.

Buut, it does not work, at all. Nothing is happening.

Where is the mistake?

Improve this question

1 Answer 1

Reset to default
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>. You'll want to refer instead to $("#bosque").
  • Second, you are setting the src attribute to the actual strings verde.src, azul.src and original.src. It's as if you were saying <img src="verde.src">, which is not what you want. 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.

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:

Improve this answer
3
  • That leaves my mapped areas unrespected. Hovering over the image changes now the images, no matter where my mouse is. It does not respect the mapped areas anymore. I changed $(this).attr("src", "verde.src"); to $("#bosque").attr("src", verde.src); leaving this as it was before $("#verdeA").hover(function() { (I changed both functions of course, and the azul image appears when the mouse enters the image).
    – Maccaroni
    Commented Oct 16, 2014 at 18:25
  • Maybe I wasn't clear enough--just edited my comment to include the changes I meant and a demo image to show the result I get.
    – myersjustinc
    Commented Oct 16, 2014 at 18:46
  • Thanks a lot! Awesome little clip there :) It works now like a charme! The problem was not that you were not clear enough. I changed it just like you did. The problem why it was not working was that <img name="bosque" id="bosque"... , name and id had the same "name" -> bosque. Changed the id to something else and it worked.
    – Maccaroni
    Commented Oct 16, 2014 at 19:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.