Effective HTML Div with a hole in it

Question

Let me explain a little more, I'm trying to have a large area (full screen) with a fixed size hole. The hole will follow the mouse around the screen. Think of the area focused on the page and the rest of the page grayed out.

I need this work efficiently in all browsers (including IE 6).

My current solution uses 4 divs (top, right, bottom, left) and forms a hole this way. However, this requires a redraw of the entire screen, and this shows artifacts (divs have a background image so that the gray space).

Is there a better (more efficient) way to achieve this that anyone might encounter?

Note. The hole should convey all events through the elements below these sections.

Answer 1

Findings:

• Having 4 partitions and resizing them is the fastest approach
• 4 sections moving 4 times slower
• Moving 1 container div w / 4 inner divs is also slow (4 times slower than resizing)
• Using background images is the only option supported by IE (since the opacity filter (alpha) is too slow for all sections of the page size).
• The background image should be solid (i.e. 1px solid with translucency). Trying to get a solid color / translucent color to achieve blur will result in screen redraw artifacts (even if they don't resize / move).

Answer 2

div, . , . , . (, 50%), , , . , , - . , DOM - div.

: , . , div . div. , div ( ). ( style), ( , , OP "" ).

Answer 3

• div, , .
• , divs, .
• javascript div , div.

Answer 4

canvas, IE excanvas, http://excanvas.sourceforge.net/, canvas. , html, .

Answer 5

, DOM " " , . , "n drop" (mootools, jquery ..), . "" v.s. , onmousemove. , . , "" ..

I have seen partial solutions that involve moving the dragged item from the mouse pointer, so that the pointer is “cleared” and can trigger events correctly, but this will most likely ruin the effect of the window you are going to use.

Most likely you are stuck by dragging these 4 divs. Do I need to have a background image? CSS transparency not a candidate?