IE image map remains clickable behind another div

Question

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

Answer 1

Try returning false on a click event of the semi-transparent black background. In jQuery it could be done as such:

$("#black_bg").click(function(){
    return false;
});

Also, since you're using absolute positioning, set the map to a z-index lower than that of the specific state map and the black background.

---

EDIT: I see that you've uploaded the relevant code. Try returning false when a click event on the link map is triggered or on the black background and see if that does anything.

Answer 2

The reason is because the image map you have is registering clicks based upon location of the screen. Remember, with the map, you're telling the browser that when you get a click between XX and YY then to perform an action.

You may want to remove the "Click" event handler (or just change it to return false) whenever the popover element is loaded.

Answer 3

After an hour of tweaking and un-tweaking, IE conditionals and unbinding my jQuery events...all I had to do was change $("area").live() to $("map#countryMap area").live() and it works perfectly.