[jQuery] Implement opacity on imagemap polygon
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">
#############################