CODEWITHSUNDEEP
javascriptjqueryhtmlimagemap
MWhitmore
MWhitmore

Reputation: 93

Jquery / imagemap combination not working properly

I'm using a combination of Jquery and html imagemap to have a banner with rollovers over different areas. The basic function of it works fine, but I've been having issues with making it more advanced.

This is the jsfiddle http://jsfiddle.net/2fav4/

What's happening, is the hover works fine, the new image appears and all that. When the user clicks on the image, it stays up (like it's supposed to), the problem is that the clicked state never goes away. I want the user to be able to dismiss the image by clicking it a second time.

Upvotes: 0

Views: 506

Answers (1)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

The trick is to use .toggleClass().

Simplifying significantly, I get:

jQuery("#map-container area").mouseover(function() {
    jQuery('.'+$(this).attr('id')+'-map').show();
}).mouseout(function() {
    jQuery('.'+$(this).attr('id')+'-map').not('.selected').hide();
}).click(function(){
    var regionMap = jQuery('.'+$(this).attr('id')+'-map');
    jQuery('#map-container img.region').not(regionMap).removeClass('selected').hide();
    regionMap.toggleClass('selected').not('.selected').hide();
});

See fiddle

You will see that I removed everything to do with ....list as it's non-functional, at least in the HTML I can see. If list stuff is important, you will have to add it back in.

Upvotes: 1

Related Questions