I have an image which may have some divs over it (specifying certain selections within that image). These divs are supposed to be clickable. Something like that:

#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; } 
#divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer;  top: 20px; left: 20px; }

<div id="divOuter">
    <img src="SomeImage.jpg" />
    <div id="divInner"></div>
</div>

$("#divOuter").click(function() { alert("divOuter"); });
$("#divInner").click(function() { alert("divInner"); });

In chrome and FF it works as expected (pointer appears over the div, and clicking it alerts "divInner" and then "divOuter").
However, in IE8 it didn't - I got the same behavior only when hovering/clicking on the inner div borders. When clicking inside that div, only "divOuter" was alerted.
How can this be fixed?

I have an image which may have some divs over it (specifying certain selections within that image). These divs are supposed to be clickable. Something like that:

#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; } 
#divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer;  top: 20px; left: 20px; }

<div id="divOuter">
    <img src="SomeImage.jpg" />
    <div id="divInner"></div>
</div>

$("#divOuter").click(function() { alert("divOuter"); });
$("#divInner").click(function() { alert("divInner"); });

In chrome and FF it works as expected (pointer appears over the div, and clicking it alerts "divInner" and then "divOuter").
However, in IE8 it didn't - I got the same behavior only when hovering/clicking on the inner div borders. When clicking inside that div, only "divOuter" was alerted.
How can this be fixed?

• javascript
• html
• css

• Try giving the image width/height information and you probably need a span in the #divInner with size. Had this problem recently myself. – Orbling Commented Jan 9, 2011 at 15:18
• 2 Try adding background colours to your divs and see if that either makes them clickable, or shows where they're being placed. – David Thomas Commented Jan 9, 2011 at 15:18
• Sounds like you're trying to recreate that what is called an 'Image Map'. webstartcenter./howto/imgmap.php – GolezTrol Commented Jan 9, 2011 at 16:33
• @David - adding a background color to the inner div did work, but I preferred avoiding that. @GolezTrol - not exactly, I needed something more dynamic. – Kuzco Commented Jan 9, 2011 at 19:01

3 Answers 3

Here's a hack: add an CHAR like "O" to the inner div, and then give it an enormous font size(depends on the area you want to span over):

#divInner { /* ... */; font-size: 1000px; color: transparent; }

(Also set "overflow: hidden" I think.)

IE likes there to be something there in the container for the click to affect. If it's just pletely empty, it ignores clicks.

a fiddle: https://jsfiddle/cbnk8wrk/1/ (watch in IE!)

I had the same problem with an unordered list, see Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

The solution : give the div a background color and make it transparent with a filter.

Adding an 1x1 px transparent background gif to the div is also working.

#divInner { background: url(/images/transparent.gif); }