I have an Image Map of the United States. When you click on a state, the map fades out and a map of that state appears with an image map of the area codes in the state. In Firefox, Safari, and Chrome, the state map becomes clickable and the United States map becomes unclickable until you close the sate popover. However in Internet Explorer, the United States map remains clickable through the state popover, and I cannot click on any area codes.
Here is my javascript:
$(document).ready(function() {
$("#usMap").html();
$("#usMap").load("/includes/us_map.inc");
});
$('area').live('click', function() {
var state = $(this).attr("class");
var statePopover = $("<div id='statePopoverContainer'><a id='popoverCloseButton'>Close State</a><div id='statePopover'></div></div>");
$("#usMap").append(statePopover);
$("#usMapImage").fadeTo('slow', 0.2);
$("#statePopover").load("/includes/stateMaps/" + state + ".html");
});
$("#popoverCloseButton").live('click', function() {
$("#statePopoverContainer").remove();
$("#usMapImage").fadeTo('slow', 1);
});
I am loading the map on document ready because if you don't have Javascript, something else appears.
And here is the CSS for all things related:
div#usMap {
width:676px;
height:419px;
text-align: center;
position: relative;
background-color:#333333;
z-index: 1;
}
img#usMapImage {
z-index: 1;
}
area {
cursor: pointer;
}
div#statePopoverContainer {
width:100%;
height:100%;
z-index:5;
position:absolute;
top:0;
left:0;
}
a#popoverCloseButton {
position:absolute;
right:0;
padding-right:5px;
padding-top:5px;
color:#FFFFFF;
cursor:pointer;
}
You can see this happening at http://dev.crewinyourcode.com/
Login with beta/tester
