Using jQuery to assign an active class to an area tag (image map)

Question

Is there a way, through jQuery, to assign an active class to an area tag within an a map?

I have a bunch of areas defined like this:

<map name="mappy"> 
    <area shape="rect" coords="162,105,179,136" href="#" title="Unique Title 1" alt="Unique Title 1" /> 
    <area shape="rect" coords="205,72,222,101" href="#" title="Unique Title 2" alt="Unique Title 2" /> 
</map>

What I need to figure out is if it is possible to add a some jQuery that sniffs out the title or alt tag and applies an active class to the area if there is a match.

Something like... if title="Unique Title 1" then add class="active" to area. Is this possible?

Thanks!

Answer 1

You can use the attribute-equals selector to find it and .addClass() to do the actual adding, like this:

$("area[title='Unique Title 1']").addClass("active");

Answer 2

I'm not quite sure I completely understand what your asking for, but this may do it:

$(document).ready(function() {
    $("map.mappy area").click(function() {
        $("map.mappy area").removeClass("active");  //Make sure no other "active" classes exist
        $(this).addClass("active");  //Add the active class to the area that was clicked
    });
});

Hopefully you wanted to add the active class in a click event, if not, I'm sure this could be modified easily to fit your needs (hover or whatever event your looking for).