Solved

LAYER OVER LAYER WITH CSS

Posted on 2004-10-06
3
253 Views
Last Modified: 2008-02-01
I'm trying to get my layers to work. I want to click on a link and another layer will take over.
this is the script i have so far:
This shows just shows me the layerno. I'm pretty new to java script.

<a href="javascript:void(0)" onClick="changelayer_content(1);">Link 44</a> <a href="javascript:void(0)" onClick="changelayer_content(2);">Link 555</a> <a href="javascript:void(0)" onClick="changelayer_content(3);">Link 5555</a>

<div id="content">content</div>
<div id="1">different content</div>
<div id="2">different content 2</div>

<SCRIPT>
var fredlayer;
function changelayer_content(layerno)
{
      msgstring="<BR><P>Your mouse is over<BR> Link<FONT color=red size=7> "+layerno+"</Font></P>";
            if(document.layers)
            {
                   //thisbrowser="NN4";
                  fredlayer = document.layers["content"];
                  fredlayer.document.open();
                  fredlayer.document.write(msgstring);
                  fredlayer.document.close();
            }
       if(document.all)
            {
                        //thisbrowser="ie"
                        fredlayer = document.all["content"];
                        fredlayer.innerHTML=msgstring;
            }
      if(document.getElementById)
            {
                        //thisbrowser="NN6";
                        fredlayer = document.getElementById("content");
                        fredlayer.innerHTML =msgstring;
                        //fredlayer.document.open();
                        //fredlayer.document.write(msgstring);
                        //fredlayer.document.close();
            }
}
</SCRIPT>
0
Comment
Question by:vipa2k
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 6

Accepted Solution

by:
campbelc earned 125 total points
ID: 12245684
Try this:

<SCRIPT language=JavaScript>

ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work

function hideSec() {
  for(var i=1;i<=3;i++){
    if (ng5) document.getElementById('sec'+i).style.visibility = "hidden"
    else if (ns4) document.layers['sec'+i].visibility = "hide"
    else if (ie4) document.all['sec'+i].style.visibility ="hidden"
  }
}

function showSec(n) {
hideSec();
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}
</script>

<form>
  <p align="center"><INPUT style="WIDTH: 150px" onclick="showSec(1)" type=button value="Show Layer 1"> <INPUT style="WIDTH: 150px" onclick="showSec(2)" type=button value="Show Layer 2"> <INPUT style="WIDTH: 150px" onclick="showSec(3)" type=button value="Show Layer 3"> </p>
</form>

  <div id="sec1" style="left:0px;postition:absolute;top:0px;visibility:visable;">
    <table width="500" cellspacing="1" cellpadding="3" bgcolor="cccccc">
      <tr bgcolor="808080">
        <td align="center" style="color:#ffffff;font-weight:bold">DIV LAYER 1</td>
      </tr>    
    </table>
  </div>
  <div id="sec2" style="left:0px;postition:absolute;top:0px;visibility:hidden;">
    <table width="500" cellspacing="1" cellpadding="3" bgcolor="cccccc">
      <tr bgcolor="808080">
        <td align="center" style="color:#ffffff;font-weight:bold">DIV LAYER 2</td>
      </tr>    
    </table>
  </div>
  <div id="sec3" style="left:0px;postition:absolute;top:0px;visibility:hidden;">
    <table width="500" cellspacing="1" cellpadding="3" bgcolor="cccccc">
      <tr bgcolor="808080">
        <td align="center" style="color:#ffffff;font-weight:bold">DIV LAYER 3</td>
      </tr>    
    </table>
  </div>
0
 

Author Comment

by:vipa2k
ID: 12245870
the script was almost what I was looking for. I want to create a slideshow effect when i click on the link. So the exact position of the previous div tag will be taken over by the new one.
here is my current code http://www.i4learning.com/qu/body_scope.html

thanks
0
 

Author Comment

by:vipa2k
ID: 12245910
I used some of my brain and was able to figure it out to make these minor changes. The question has been answered! thanks a lot :)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question