2

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">&nbsp;</td>
        </tr>
        <tr id="drawbox_tr">
            <td class="drawbox_side"></td>
            <td id="drawbox">&nbsp;x</td>
            <td class="drawbox_side"></td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;</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?

CaptainCarl
  • 3,411
  • 6
  • 38
  • 71

1 Answers1

0

I have read a simulair topic about 'pointer events' on SO before.

Pointer-events is a Mozilla hack and where it has been implemented in Webkit browsers, you can't expect to see it in IE browsers for another million years.

Please check if this is worth trying: css 'pointer-events' property alternative for IE

Community
  • 1
  • 1
Franky W.
  • 178
  • 3
  • 17