Efficient HTML Div with hole in it

Question

Let me explain a bit more, I am trying to have a large area (full screen) with a fixed size hole in it. The hole will follow the mouse around the screen. Think of having a

Answer 1

Unfortunately, the DOM's design doesn't allow events to "pass through" a block to anything below it. This is why toolkits which allow drag 'n drop (mootools, jquery, etc...) are so complicated. They pre-calculate the location of all "droppable" elements and do mass comparison of coordinates of the dragged object v.s. the droppable objects, tied to the onmousemove events. That's one way around the limitation you could explore. Figure out what elements you want to react to your "window" and do the coordinate comparisons, etc...

I've seen partial solutions that involve offsetting the dragged element from the mouse pointer, so that the pointer's "clear" and can properly trigger events, but that would most likely ruin the window effect you're going for.

Most likey you're stuck dragging around those 4 divs. Do they have to have the background image? CSS opacity not a candidate?