Results 1 to 2 of 2

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

  1. #1
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default 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.

  2. #2
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    The source you posted doesn't work for me by itself. Please post a link to a page on your site which exhibits the problem.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •