Click on a lower z-index element

Question

I've got a div and an image overlapping one over the other. The image is in front of the div. Is it possible to be able to click on the div ignoring the image?

<img src="smiley.gif" style="z-index: 2; width:200px; height 200px;"> 
<div id="theDiv" style="background-color: #f60; width:200px; height:200px;"></div>

$('#theDiv').click(function(){
   alert("you've clicked on "+this.id);
});

Answer 1

You have to use CSS pointer-events property. Just add to img styles:

pointer-events: none;

EDIT: I'm sorry, I made a mistake, it has very good support! Can I use

Answer 2

Assign an id to your image:

<img id='image' src="smiley.gif" style="z-index: 2; width:200px; height 200px;">

and use click event on image to do whatever you want to do with your div

$('#image').click(function(){
    //perform tasks on your div here
    $('#theDiv').css('background-color', '#fff'); 
});