make selectable area using javascript
- by Mher
lets say I have a html page.
<html>
<body>
...
This is my HTML Page, full of html objects and mouse events on them
...
<div id='blocker' style="height: 100%; position: absolute; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1001; background: none repeat scroll 0% 0% black; opacity: 0.5;"></div>
<div id='window_to_my_html_page' style="display: block; left: 50px; top: 50px; width: 200px; height: 200px; z-index: 1002; position: absolute;"></div>
</body>
</html>
In this example div which id is 'blocker' will block all mouse events from my page.
All my HTML page elements behind of my second div(which id is 'window_to_my_html_page') must be active, all mouse events must work on them, this div must be like a window to my HTML page
I want to make all elements from my HTML page active(to work as normal) inside this area (left: 50px; top: 50px; width: 200px; height: 200px).... and other content, outside of this area make inactive
The question: how can I do it?
