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

LAYER OVER LAYER WITH CSS

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
vipa2k
Asked:
vipa2k
  • 2
1 Solution
 
campbelcCommented:
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
 
vipa2kAuthor Commented:
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
 
vipa2kAuthor Commented:
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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