Code:
<html>
<head>
<style type="text/css">
p {
margin-bottom: 300px;
}
#dark {
width: 1px;
height: 1px;
opacity:.50;
background-color: black;
z-index:10;
display : none;
position: absolute;
}
</style>
<script type="text/javascript">
function BlackOut(targetDiv, theDarker) {
var obj1=document.getElementById(theDarker),obj2=document.getElementById(targetDiv)
obj1.style.display = "block";
obj1.style.height = obj2.offsetHeight+'px';
obj1.style.width = obj2.offsetWidth+'px';
obj1.style.top = obj2.offsetTop+'px';
obj1.style.left = obj2.offsetLeft+'px';
}
</script>
</head>
<body>
<h1>This is my test page</h1>
<p>Paragraph, let's skip some text</p>
<p>Once more</p>
<div id="dark"></div>
<div id="mydiv">my div <a href="#" onClick="BlackOut('mydiv', 'dark'); return false;">click to darken</a></div>
<p>.</p>
</body>
</html>
Bookmarks