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
