• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1059
  • Last Modified:

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

0
Shaye Larsen
Asked:
Shaye Larsen
  • 2
  • 2
2 Solutions
 
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
 
Mahdii7Commented:
Nice, sorry I neglected this.
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now