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
