IE image map remains accessible behind another div
I have an image map of the United States. When you click on a state, the map disappears and a map of that state is displayed with a map of the area codes in the state. In Firefox, Safari, and Chrome, the state map becomes interactive, and the United States map becomes invisible until you close the population. However, in Internet Explorer, the United States map remains clickable through the status popup 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 to the document because if you don't have Javascript something else appears.
And here's the CSS for all the related stuff:
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
source to share
Try returning false on the click event of the translucent black background. In jQuery, this can be done like this:
$("#black_bg").click(function(){
return false;
});
Also, since you are using absolute positioning, set the map to a z-index lower than the specific state map and a black background.
EDIT: I see that you have downloaded the relevant code. Try returning false when the linkmap click event is fired or on a black background and see what that does.
source to share
The reason is that you have an image map that logs clicks based on screen location. Remember that with the map you are telling the browser that when you get a click between XX and YY, then take an action.
When the popover element is loaded, you can remove the "Click" event handler (or simply change it to return false).
source to share