Piątek 04 Kwiecień 2025r. Godz 00:00:00      
Postów: 251      

  •  Wyszukaj:
  •  Baner:
    Tanie strony www Bydgoszcz
    Remonty Bydgoszcz

Ukrywanie warstw DHTML

Tematem kilku następnych lekcji będzie manipulacja warstwami przy użyciu języka JavaScript. Występują tutaj pewne niezgodności pomiędzy przeglądami Navigator i Internet Explorer. Na początku zajmiemy się ukrywaniem i pokazywaniem warstw. Jeżeli chcemy ukryć jakąś warstwę trzeba się do niej odwołać według schematu:
Microsoft Internet Explorer: document.all["nazwa_warstwy"];
Netscape Navigator: document.layers["nazwa_warstwy"];
Ukrywanie warstw możliwe jest dzięki właściwości style.visibility (MSIE) lub visibility (NN). Właściwość ta może przyjmować wartości:
Microsoft Internet Explorer: hidden (warstwa ukryta) lub visible (warstwa widoczna).
Netscape Navigator: hide (warstwa ukryta) lub show (warstwa widoczna).

<HTML>
  <HEAD>
    <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
    <STYLE TYPE="text/css">
    <!--
      #warstwa1 { position: absolute; left: 50; top: 0; background-color:yellow; visibility: hidden }
      #warstwa2 { position: absolute; left: 100; top: 0; background-color:blue; visibility: hidden }
      #warstwa3 { position: absolute; left: 150; top: 0; background-color:red; visibility: hidden }
    -->
    </STYLE>
    <SCRIPT LANGUAGE="JavaScript">
        nn4 = (document.layers) ? true:false;
        ie4 = (document.all) ? true:false;
        function klikniecie(nacisniecie,nazwa)
        { if (nn4) { if (nacisniecie) { document.all[nazwa].style.visibility='visible'}
            else { document.all[nazwa].style.visibility='hidden'};
          if (ie4) { if (nacisniecie) { document.layers[nazwa].visibility='show'}
            else { document.layers[nazwa].visibility='hide'}; } }
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR="#6FB20F">
    Wybierz, które warstwy chcesz zobaczyć:<BR>
    <FORM NAME="wybierz">
      <INPUT TYPE="Checkbox" onClick="klikniecie(this.checked,'warstwa1');">Warstwa pierwsza<BR>
      <INPUT TYPE="Checkbox" onClick="klikniecie(this.checked,'warstwa2');">Warstwa druga<BR>
      <INPUT TYPE="Checkbox" onClick="klikniecie(this.checked,'warstwa3');">Warstwa trzecia
    </FORM>
    <DIV ID="warstwa1">To jest warstwa pierwsza</DIV>
    <DIV ID="warstwa2">To jest warstwa druga</DIV>
    <DIV ID="warstwa3">To jest warstwa trzecia</DIV>
  </BODY>
</HTML>