Claudia: Z-index oder visibility von layern bei klick auf link ändern?

SELF-Forum

Z-index oder visibility von layern bei klick auf link ändern?

Claudia
– Informationen zu den Bewertungsregeln

Guten morgen!

Ich habe eine Seite mit mehreren layern (divs). Nun möchte ich folgendes realisieren. Ein bestimmter layer soll am Anfang versteckt sein (= unsichtbar). Bei klick auf einen Link, soll dieser layer sichtbar werden. Entweder über eine Erhöhung des z-index, oder auch über eine Änderung des visibility-Wertes. Das ist egal. In diesem nun sichtbaren layer soll wiederum ein link sein, um ihn zu "schliessen" (= wieder unsichtbar machen über eine der oben genannten Möglichkeiten).

Wie bekomme ich das hin? und ganz wichtig: geht das auch im Netscape 4.x?

Ich freue mich auf Eure Antworten und hoffe, dass Ihr mir helfen könnt!!

Danke und liebe Grüße,
Claudi

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Z-index oder visibility von layern bei klick auf link ändern?

    Christoph Schnauß
    – Informationen zu den Bewertungsregeln

    guten morgen ebenfalls

    Bei klick auf einen Link, soll dieser layer sichtbar werden. Entweder über eine Erhöhung des z-index, oder auch über eine Änderung des visibility-Wertes. Das ist egal.

    Das ist es meines Wissens nicht. Der z-index bestimmt die Schichtposition, aber nicht die "Sichtbarkeit". Du solltest das also über "visibility" machen.

    Wie bekomme ich das hin? und ganz wichtig: geht das auch im Netscape 4.x?

    Erst einmal: Netscape 4.x macht das mit. Und zur Lösung: an sich ist das relativ einfach, geht mit einer Kombination aus Javascript und CSS. Ich benutze diese Kombination relativ häufig, und weil heute Sonntag ist, mach ich mal was, was ich sonst schön bleiben lasse. Ich setze dir mal meine vollständige Vorlage für eine Seite mit solchen Layern her.

    =======================

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>sichtbare/unsichtbare Layer</title>
    <script language="javascript">
    <!--
    var i = 1;
    var schicht = "bereich";

    var browserName = navigator.appName;
    var browserVersion = parseInt(navigator.appVersion);
    var isIE = false;
    var isNN = false;
    var isDOM = false;
    var isDomIE = false;
    var isDomNN = false;

    isIE = browserName.indexOf("Microsoft Internet Explorer" )==-1?false:true;
    isNN = browserName.indexOf("Netscape")==-1?false:true;
    isDOM = document.getElementById?true:false;

    function verbergen(name) {
      if (isDOM) document.getElementById(name).style.visibility="hidden";
      if (isDomIE) document.all[name].style.visibility="hidden";
      if (isDomNN) document.layers[name].visibility="hidden";
    }

    function zeigen(name) {
      if (isDOM) document.getElementById(name).style.visibility="visible";
      if (isDomIE) document.all[name].style.visibility="visible";
      if (isDomNN) document.layers[name].visibility="visible";
    }

    function click(num){
    verbergen(eval('"' + schicht + i +'"'));
    zeigen(eval('"' + schicht + num +'"'));
    i = num;
    }
    //-->
    </script>

    <style type="text/css">
    <!--
    body { margin-top:5px; margin-bottom:15px; background-color:#000011; }

    p,h1,h2,h3,h4,ul,ol,li,div,td,b,i { font-family:Helvetica,Arial,Sans-serif; }

    h1 { font-size:16pt; }
    h2 { font-size:14pt; }
    h3 { font-size:12pt; }
    h4 { font-size:10pt; }

    p,ul,ol,li,div,td,b,i { font-size:9pt; color:#FFFFFF; }

    a:link { color:#FFFFFF; text-decoration:none; }
    a:visited { color:#FFFFFF; text-decoration:none; }
    a:active { color:#FFFFFF; text-decoration:none; }
    a:hover { color:#FF0000; text-decoration:none; }

    #bereich1 {position: absolute; visibility: visible; left: 160px; width: 800px; top: 10px; background-color:#0000FF; layer-background-color:#0000FF;}
    #bereich2 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 40px; background-color:#0000FF; layer-background-color:#0000FF;}
    #bereich3 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 70px; background-color:#0000FF; layer-background-color:#0000FF;}
    #bereich4 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 100px; background-color:#0000FF; layer-background-color:#0000FF;}
    #bereich5 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 120px; background-color:#0000FF; layer-background-color:#0000FF;}
    #bereich6 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 150px; background-color:#0000FF; layer-background-color:#0000FF;}
    #menu {position: absolute; visibility: visible; left: 10px; width: 120px; top: 70px; z-index: 25;}
    //-->
    </style>
    <base target="_blank">
    </head>

    <body>

    <div ID="bereich1">
    <div align="center"><center>
    <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
        <td width="50%"><b>bitte Inhalt eingeben</p></td>
        <td width="50%"> </td>
      </tr>
    </table></center></div>
    </div>

    <div ID="bereich2">
    <div align="center"><center>
    <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
        <td width="50%"> </td>
        <td width="50%"> </td>
      </tr>
    </table></center></div>
    </div>

    <div ID="bereich3">
    <div align="center"><center>
    <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
        <td width="50%"> </td>
        <td width="50%"> </td>
      </tr>
    </table></center></div>
    </div>

    <div ID="bereich4">
    <div align="center"><center>
    <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
        <td width="50%"> </td>
        <td width="50%"> </td>
      </tr>
    </table></center></div>
    </div>

    <div ID="bereich5">
    <div align="center"><center>
    <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
        <td width="50%"> </td>
        <td width="50%"> </td>
      </tr>
    </table></center></div>
    </div>

    <div ID="bereich6">
    <div align="center"><center>
    <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
        <td width="50%"> </td>
        <td width="50%"> </td>
      </tr>
    </table></center></div>
    </div>

    <div ID="menu"><b><br>
    <a href="javascript:click(1)" target="_self">Bereich 1</a><br><br>
    <a href="javascript:click(2)" target="_self">Bereich 2</a><br><br>
    <a href="javascript:click(3)" target="_self">Bereich 3</a><br><br>
    <a href="javascript:click(4)" target="_self">Bereich 4</a><br><br>
    <!--
    <a href="javascript:click(5)">bereich5</a><br><br>
    <a href="javascript:click(6)">bereich6</a>
    //-->
    </b>
    </div>

    </body>
    </html>

    =======================

    Grüße aus Berlin

    Christoph S.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Z-index oder visibility von layern bei klick auf link ändern?

      Claudia
      – Informationen zu den Bewertungsregeln

      Ähhhh...

      das ist ja irre - SUPERVIELEN DANK lieber Christoph!

      Ich habe ja gerade erst auf "absenden" gedrückt. :-)

      Das muss ich mir jetzt erst mal angucken - sieht aber Klasse aus. Wie gut, dass heute Sonntag ist! :-)

      Vielen Dank nochmal! Ich bin heute das erste mal hier. Aber ich glaube hier gefällt mir´s!

      Ich wünsche Dir noch einen schönen Sonntag mit lecker Kaffee und Kuchen?

      Liebe Grüsse,
      Claudia

      ===================================

      guten morgen ebenfalls

      Bei klick auf einen Link, soll dieser layer sichtbar werden. Entweder über eine Erhöhung des z-index, oder auch über eine Änderung des visibility-Wertes. Das ist egal.
      Das ist es meines Wissens nicht. Der z-index bestimmt die Schichtposition, aber nicht die "Sichtbarkeit". Du solltest das also über "visibility" machen.

      Wie bekomme ich das hin? und ganz wichtig: geht das auch im Netscape 4.x?
      Erst einmal: Netscape 4.x macht das mit. Und zur Lösung: an sich ist das relativ einfach, geht mit einer Kombination aus Javascript und CSS. Ich benutze diese Kombination relativ häufig, und weil heute Sonntag ist, mach ich mal was, was ich sonst schön bleiben lasse. Ich setze dir mal meine vollständige Vorlage für eine Seite mit solchen Layern her.

      =======================

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <title>sichtbare/unsichtbare Layer</title>
      <script language="javascript">
      <!--
      var i = 1;
      var schicht = "bereich";

      var browserName = navigator.appName;
      var browserVersion = parseInt(navigator.appVersion);
      var isIE = false;
      var isNN = false;
      var isDOM = false;
      var isDomIE = false;
      var isDomNN = false;

      isIE = browserName.indexOf("Microsoft Internet Explorer" )==-1?false:true;
      isNN = browserName.indexOf("Netscape")==-1?false:true;
      isDOM = document.getElementById?true:false;

      function verbergen(name) {
        if (isDOM) document.getElementById(name).style.visibility="hidden";
        if (isDomIE) document.all[name].style.visibility="hidden";
        if (isDomNN) document.layers[name].visibility="hidden";
      }

      function zeigen(name) {
        if (isDOM) document.getElementById(name).style.visibility="visible";
        if (isDomIE) document.all[name].style.visibility="visible";
        if (isDomNN) document.layers[name].visibility="visible";
      }

      function click(num){
      verbergen(eval('"' + schicht + i +'"'));
      zeigen(eval('"' + schicht + num +'"'));
      i = num;
      }
      //-->
      </script>

      <style type="text/css">
      <!--
      body { margin-top:5px; margin-bottom:15px; background-color:#000011; }

      p,h1,h2,h3,h4,ul,ol,li,div,td,b,i { font-family:Helvetica,Arial,Sans-serif; }

      h1 { font-size:16pt; }
      h2 { font-size:14pt; }
      h3 { font-size:12pt; }
      h4 { font-size:10pt; }

      p,ul,ol,li,div,td,b,i { font-size:9pt; color:#FFFFFF; }

      a:link { color:#FFFFFF; text-decoration:none; }
      a:visited { color:#FFFFFF; text-decoration:none; }
      a:active { color:#FFFFFF; text-decoration:none; }
      a:hover { color:#FF0000; text-decoration:none; }

      #bereich1 {position: absolute; visibility: visible; left: 160px; width: 800px; top: 10px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich2 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 40px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich3 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 70px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich4 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 100px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich5 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 120px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich6 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 150px; background-color:#0000FF; layer-background-color:#0000FF;}
      #menu {position: absolute; visibility: visible; left: 10px; width: 120px; top: 70px; z-index: 25;}
      //-->
      </style>
      <base target="_blank">
      </head>

      <body>

      <div ID="bereich1">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"><b>bitte Inhalt eingeben</p></td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich2">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich3">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich4">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich5">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich6">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="menu"><b><br>
      <a href="javascript:click(1)" target="_self">Bereich 1</a><br><br>
      <a href="javascript:click(2)" target="_self">Bereich 2</a><br><br>
      <a href="javascript:click(3)" target="_self">Bereich 3</a><br><br>
      <a href="javascript:click(4)" target="_self">Bereich 4</a><br><br>
      <!--
      <a href="javascript:click(5)">bereich5</a><br><br>
      <a href="javascript:click(6)">bereich6</a>
      //-->
      </b>
      </div>

      </body>
      </html>

      =======================

      Grüße aus Berlin

      Christoph S.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Z-index oder visibility von layern bei klick auf link ändern?

      Claudia
      – Informationen zu den Bewertungsregeln

      Hallo Christoph!

      Habe die komplette Geschichte jetzt mal eingebaut und im IE funktioniert alles wunderbar! Allerdings klappt im NN 4.75 GAR NIX! auch bei Deinem Beispiel schon nicht, daher schliesse ich einen Fehler beim Einbau meinerseits aus.  :-)

      Eventuell ist da bei Dir schon irgendwo ein klitzekleiner Fehler drin? Kannst Du bitte nochmal drübergucken?

      Vielen Dank schon mal im voraus.

      Liebe Grüsse,
      Claudia

      =========================

      guten morgen ebenfalls

      Bei klick auf einen Link, soll dieser layer sichtbar werden. Entweder über eine Erhöhung des z-index, oder auch über eine Änderung des visibility-Wertes. Das ist egal.
      Das ist es meines Wissens nicht. Der z-index bestimmt die Schichtposition, aber nicht die "Sichtbarkeit". Du solltest das also über "visibility" machen.

      Wie bekomme ich das hin? und ganz wichtig: geht das auch im Netscape 4.x?
      Erst einmal: Netscape 4.x macht das mit. Und zur Lösung: an sich ist das relativ einfach, geht mit einer Kombination aus Javascript und CSS. Ich benutze diese Kombination relativ häufig, und weil heute Sonntag ist, mach ich mal was, was ich sonst schön bleiben lasse. Ich setze dir mal meine vollständige Vorlage für eine Seite mit solchen Layern her.

      =======================

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <title>sichtbare/unsichtbare Layer</title>
      <script language="javascript">
      <!--
      var i = 1;
      var schicht = "bereich";

      var browserName = navigator.appName;
      var browserVersion = parseInt(navigator.appVersion);
      var isIE = false;
      var isNN = false;
      var isDOM = false;
      var isDomIE = false;
      var isDomNN = false;

      isIE = browserName.indexOf("Microsoft Internet Explorer" )==-1?false:true;
      isNN = browserName.indexOf("Netscape")==-1?false:true;
      isDOM = document.getElementById?true:false;

      function verbergen(name) {
        if (isDOM) document.getElementById(name).style.visibility="hidden";
        if (isDomIE) document.all[name].style.visibility="hidden";
        if (isDomNN) document.layers[name].visibility="hidden";
      }

      function zeigen(name) {
        if (isDOM) document.getElementById(name).style.visibility="visible";
        if (isDomIE) document.all[name].style.visibility="visible";
        if (isDomNN) document.layers[name].visibility="visible";
      }

      function click(num){
      verbergen(eval('"' + schicht + i +'"'));
      zeigen(eval('"' + schicht + num +'"'));
      i = num;
      }
      //-->
      </script>

      <style type="text/css">
      <!--
      body { margin-top:5px; margin-bottom:15px; background-color:#000011; }

      p,h1,h2,h3,h4,ul,ol,li,div,td,b,i { font-family:Helvetica,Arial,Sans-serif; }

      h1 { font-size:16pt; }
      h2 { font-size:14pt; }
      h3 { font-size:12pt; }
      h4 { font-size:10pt; }

      p,ul,ol,li,div,td,b,i { font-size:9pt; color:#FFFFFF; }

      a:link { color:#FFFFFF; text-decoration:none; }
      a:visited { color:#FFFFFF; text-decoration:none; }
      a:active { color:#FFFFFF; text-decoration:none; }
      a:hover { color:#FF0000; text-decoration:none; }

      #bereich1 {position: absolute; visibility: visible; left: 160px; width: 800px; top: 10px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich2 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 40px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich3 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 70px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich4 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 100px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich5 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 120px; background-color:#0000FF; layer-background-color:#0000FF;}
      #bereich6 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 150px; background-color:#0000FF; layer-background-color:#0000FF;}
      #menu {position: absolute; visibility: visible; left: 10px; width: 120px; top: 70px; z-index: 25;}
      //-->
      </style>
      <base target="_blank">
      </head>

      <body>

      <div ID="bereich1">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"><b>bitte Inhalt eingeben</p></td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich2">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich3">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich4">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich5">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="bereich6">
      <div align="center"><center>
      <table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>
          <td width="50%"> </td>
          <td width="50%"> </td>
        </tr>
      </table></center></div>
      </div>

      <div ID="menu"><b><br>
      <a href="javascript:click(1)" target="_self">Bereich 1</a><br><br>
      <a href="javascript:click(2)" target="_self">Bereich 2</a><br><br>
      <a href="javascript:click(3)" target="_self">Bereich 3</a><br><br>
      <a href="javascript:click(4)" target="_self">Bereich 4</a><br><br>
      <!--
      <a href="javascript:click(5)">bereich5</a><br><br>
      <a href="javascript:click(6)">bereich6</a>
      //-->
      </b>
      </div>

      </body>
      </html>

      =======================

      Grüße aus Berlin

      Christoph S.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln