Search code examples
javascriptjquerywebimagemap

Imageflip Javascript does not flip

I have this peace of Javascript code. I have an photograph on which I want to perfom an imageflip on a mouseover. Displaying it in the browser, the original image appears. When I go with the mouse over the defined area, the cursor changes to the hand, but the image does not flip. Thus, it recognizes the defined area (the with the coordinates created polygon), but it wont flip.

<html>
<head>
</head>
<body>

<img name="juego_paramo" src=paramo_plantas_original.gif usemap="#paramo">


<map name="paramo">
<area shape="poly" coords="0,161,4,161,4,162,12,162,12,163,19,163,26,165,34,166,45,168,52,170,62,174,73,177,82,180,91,184,103,188,112,192,122,196,133,202,142,207,152,212,162,216,172,221,180,224,186,227,193,230,197,233,0,233,0,161" 
href="#" alt="helecho", onMouseOver="resaltarHelecho", onMouseOut="originalJuego">
<area shape="default" nohref>
</map>


<script>

//preload the images
original = new Image(698,233)
originale.src = "paramo_plantas_original.gif"

helechoResaltado = new Image(698,233)
helecho.src ="paramo_plantas_con_mouse_blanco.gif"

//JS function to enlarge the image
function resaltarHelecho() {
                           document.juego_paramo.src=helechoResaltado; 
                                    return true;
                                    }

function originalJuego () {
                                    document.juego_paramo.src=original;
                                    return true;
                                    }

</script>
</body>
</html>

I cannot find the mistake. Any hints where do look for it?

Solution

  • There are some mistakes in your HTML as well as in your javascript: 

    original = new Image(698,233)
originale.src = "paramo_plantas_original.gif"

    The name of the new Image should be the same, e.g.

    originale = new Image(698,233)
originale.src = "paramo_plantas_original.gif"

    Using pure javascript, changing the source of the image in your functions wouldn't work like you did, e.g. here:

    document.juego_paramo.src=original;

    This should be

    document.getElementById('juego_paramo').src = originale.src;

    (provided the original image has an id="juego_paramo" which I just added for convenience).

    Your <area> ends with the attributes alt="helecho", onMouseOver="resaltarHelecho", onMouseOut="originalJuego" - this should be alt="helecho" onMouseOver="resaltarHelecho()" onMouseOut="originalJuego()" - no "," between the attributes, and adjusted the call for the functions for the mouse-events.

    The console.log message is deleted in the updated Fiddle - it was just to make sure the function was called before I added the dummy images.