How change image map area element style - css

Question

I'm using image map on my web page and iPad app. Each area on the image map is a clickable element to make sound, which I can do easily with jQuery. But I haven't been able to change the style, like either showing the border, or change the fill color just to indicate that the area is clicked. If anybody has done this, please let me know; it seems simple, but I'm really stumped.

Answer 1

I got it to work thanks to James Treworgy's awesome ImageMaster Jquery plugin.
$('area').mousedown(function(e) {
$(this).mapster('set',true);
});
$('area').mouseup(function(e) {
$(this).mapster('set',false);
});
$('area').bind( "touchstart", function(e){
$(this).mapster('set',true);
});
$('area').bind( "touchend", function(e){
$(this).mapster('set',false);
});

Answer 2

It's hard to say without seeing the code, but the same way you are referencing the parts of the map is the same way you apply the styles.
If you have a section1 id, then you css could be
#section1{
border://something
background-color://something else
}
Or, in your script, when you reference the click, you also add some styles, e.g.,
$('#section1').click(function(){
//whatever
$(this).css({'background-color' : 'red', 'border' : '1px solid black'});
});