asked on

How do you create a transparent layer over a table that has a link?

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.

Open in new window

SOLUTION

Mahdii7

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaye Larsen

ASKER

K, taking your suggestion, I loaded jQuery and am now trying to make it work.

I have a test page here
http://fabuso.com/IdeaOrbit_web/0001/test.jsp

You will see that if you click the table, it will fade out using the sample code you provided above. I am not familiar with jQuery syntax and am finding their documentation to be a headache.

Below is the code to the new page. All I want is for the table or div to have a transparent opacity of .33 on it when the page loads. That layer must also have a link that sits on top of it which the user can click. That link will take them to another page.

Thanks again for your help.

  <html>
  <head>
    <script type="text/javascript" src="../includes/jquery-1.2.6.js"></script>
  <script>
  $(document).ready(function(){
    
    $("p:first").click(function () {
      $(this).fadeTo("slow", 0.33);
    });
 
  });
  </script>
  </head>
  <body><p><table><tr>
  		<TD valign="middle" background="images/index_01.jpg" WIDTH=775 HEIGHT=193 style="padding:6px">
 
 
    <a href="http://jquery.com/">jQuery</a>
 
			</TD></tr></table></p>
  </body>
  </html>