I have multiple areas of our site that i want to appear innactive until the user clicks on it, then it appears active.

To pull this off, i need a code that will make a table or a cell or a div transparent using opacity. I want the user to be able to see the area behind the transperncy, so I will probably set it at 50% or so.

I have two problems I am facing with this.

1. I have found code that will make the entire browser window grayed out or transparent with a pop up box in the middle, but I can't get it to work for just a div or a table.

2. I want a gif that has transparent edges to appear in the middle of the grayed out area. Then they should be able to click that gif and it will take them to a page that doesn't have the grayed out area. I know it would make more sense to just have the grayed out area go away right there on the same page, but I have too many scripts for different purposes which will bog down the page. So I need each area to link to a separate page.

The code below works for an entire page, but not just a div.

<!-- Start gray out popup script -->
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "100%"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<!-- End gray out popup script -->


<!-- This contains the grayed out area -->
<div id="cover"></div>


<!-- This is a link that activates the grayed out area, but I don't want this. I want the grayed out area to appear first, and click on it to go to a separate page. -->
<a onclick="showPopUp('dialog');" class="style12">Link</a>

Thank you for any help you can offer in solving this.