[jQuery] Implement opacity on imagemap polygon

[Spencer]

I'm new to jQuery and would really like to be able to use it for
applying an opacity to an area on an imagemap.  Is this possible?  I
really don't want to swap images unless it becomes necessary.  The
following code allows me to bind a click event (for testing) to the
individual "area" tags, but I can't seem to get the opacity to apply,
even though the "setOverlay" class is applied.  I would really
appreciate any help or suggestions.

Thanks,

Spencer

#### CSS #########
.setOverlay {
        background-color: #C2C2C2;
        filter: alpha(opacity=65);
        -moz-opacity: 0.65;
        opacity: 0.65;
}

.removeOverlay {
        filter: alpha(opacity=65);
        -moz-opacity: 0.65;
        opacity: 0.65;
}
############

#### JAVASCRIPT ############
$(document).ready(function() {
        $("#body_head").click(function() {
                $(this).removeClass("removeOverlay");
                $(this).addClass("setOverlay");
        });
        $("#body_neck").click(function() {
                alert("Neck");
        });
});
#############################

#### HTML ###################
<map id="body_map" name="body_map">

        <area id="body_head" name="body_head" class="removeOverlay" href="#"
shape="polygon" alt=""
coords="113,12,88,23,87,49,93,80,101,90,116,94,128,92,136,77,144,68,144,41,142,25,133,15,123,11"
target="_self" />
        <area id="body_neck" name="body_neck" class="removeOverlay" href="#"
shape="polygon" alt=""
coords="92,125,91,89,108,97,119,95,132,89,137,85,136,124,125,134,110,134,93,128"
target="_self" />

</map>

<img src="mri_body.jpg" alt="Site map" usemap="#body_map" width="218"
height="750" border="0">
#############################