Question

I’ve created an image map using the basic map and area tags. I’ve tested the map and all the areas behave as they are supposed to, so the HTML is definitely correct.

When clicking on an area, the source of the map image is replaced with another.
Naturally, when clicking a second time, the map source should revert to its original state.
It’s basically a click/unclick type event and I am trying to use .bind() to do the unclicking. For some reason, it doesn’t seem to be working.

The code is as follows:

$(document).ready(function(){
$("#area1").click(function(){ 
$("#londonmap").attr('src','images/clickimage.png');
});
$("#area1").unbind("click", function() {
$("#londonmap").attr('src','images/originalimage.png');
});
});

I tested this with mouseover/mouseout instead of click and unbind and this works just fine, but of course this is not iPad-friendly. When I attempt this though, only the click works and then the second time I click the area – nothing happens.

I suspect there’s something wrong with the way I implemented the .unbind()

Thanks for helping a jQuery noob!

Answer 1

Update

• jsFiddle demo 1
• jsFiddle demo 2 – Generic image swapper
• jsFiddle demo 3 – Generic image swapper with div clicker
• jsFiddle demo 4 – Fading

Original

The .unbind event will remove the click event all together. With the current code, once the image has been clicked once, it will remove the click event and be unclickable… forever, sad times! Try toggling the image src like so:

$(document).ready(function()
{
    var images = ['http://www.doggyplanet.co.uk/images/new-icon-images/Dog-cartoon.png', 'http://s.thumbs.canstockphoto.com/canstock2134964.jpg'];
    $('#area1').click(function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != images[0] ? images[0] : images[1];

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
});​