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

LVL 1
Shaye LarsenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mahdii7Commented:
1. You can accomplish this by wrapping the <table> in a <div>. Then fading the <div> will subsequently fade the <table>.  Fading a <table> isn't as cross-browser compliant as fading a <div> (pretty sure <= ie6 will not render this).

I highly recommend a JS library such as jQuery, Prototype, Mootools, or dojo to accomplish this! It will save file size and reduce headaches. They have functions to fade that are as simple as "$(this).animate({opacity:0});" as opposed to writing up or modifying a sloppy third party function.

However, if you insist on using the above function that you posted, it won't take much to modify it. See code snippet below.

2. This one is a pain, but I'll post my take on it below.
// Question 1: 
 
<script type="text/javascript">
function showPopUp(el) {
// Below this, is the reference to the ID of the div, modify this ID and it will effect a different element.
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
// You will want to remove the CSS styling, as you obviously dont want your table 100% width+height.
cvr.style.width = "100%"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
// Second ID reference..
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
 
// Question 2:
 
<div> // primary holder
 <div style="position:absolute; left:100px; top:100px;" onclick="function_to_remove_overlay()">image.gif</div> // css will vary with your design
 <div id="overlay"> // you fade this div with the id "overlay", the gif will be clickable..
  <table>
   // table data
  </table>
 </div>
</div>
 
// Cheers

Open in new window

0
Shaye LarsenAuthor Commented:
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>

Open in new window

0
Shaye LarsenAuthor Commented:
k, solved this on my own.  See the code below.
<!-- Here are the styles -->
<style>
div.container {
        position:relative;
        width: 100%;
        height: 100%;
 
}
 
div.content {
        position:absolute;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
        z-index:1;
        background-color:#CCCCCC;
filter:alpha(opacity=50);
opacity:.50;
-moz-opacity:.50;
-khtml-opacity:0.5;
 
		
        }
div.over_content {
        width: 100%;
        height: 100%;
        z-index:2;
		vertical-align:middle;
}
.edit_this {
        position:relative;
        z-index:3;
		text-align:center;
filter:alpha(opacity=60);
opacity:.60;
-moz-opacity:.60;
-khtml-opacity:0.6;
		font-size:54px;
		font-weight:bold;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
}
</style>
 
 
 
 
 
 
<!-- Here is the div container -->
 
<div class="container"> 
  <div id="content_canvas" class="content">
    <font face="Arial, Helvetica, sans-serif" size="5" color="#FFFFFF">Some Content</font>
  </div>
  <div id="over_content" class="over_content" align="center"><a class="edit_this" href="link.jsp">Edit This</a>
  </div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mahdii7Commented:
Nice, sorry I neglected this.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.