I have an overlay with a hole in the middle functioning as a mask for the image underneath it. I want to drag the image around with draggable(). However, I can't find a solid way to ignore the overlay with my mouse(It's some TR's TD's creating a variable mask in the middle with javascript). I came across pointer-events: none though. And that's exactly what i need. I need to get it to work in IE8 too though. So i need a more X-browser friendly solution.
Any help is appreciated.
<div class="workspace">
<!-- <div id="color_overlay"></div> -->
<table border="0" cellpadding="0" cellspacing="0" class="overlay">
<tr>
<td colspan="3"> </td>
</tr>
<tr id="drawbox_tr">
<td class="drawbox_side"></td>
<td id="drawbox"> x</td>
<td class="drawbox_side"></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
<div id="image"></div>
</div>
And CSS:
.container .workspace {
float: left;
width: 75%;
height: 100%;
overflow: hidden;
background: pink;
position: relative;
}
.workspace .overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
margin: 0px;
padding: 0px;
cursor: pointer;
}
.workspace .overlay td, .workspace .overlay tr {
margin: 0px;
padding: 0px;
}
.workspace .overlay td {
opacity: 0.5;
}
.workspace #image {
position: absolute;
z-index: 1;
border: 1px solid #000;
}
edit:
I've made a little demo of the pointer-event(http://www.envyum.nl/pointer/). In Chrome for example it works like a charm by making the pointer-event: none. In IE8 nothing happens. But i still need it for IE8 though. There must be some workaround which makes it ignore the overlay and make the image below it resizable and draggable, right?