Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Kolejność wyświetlania warstw

Email Drukuj PDF

O tym, jaka będzie kolejność wyświetlania warstw w sytuacji, kiedy zachodzą one na siebie, decyduje atrybut z-index. Można go zdefiniować z poziomu języka HTML; tę wartość można też jednak zmieniać przy użyciu języka JavaScript. W takim przypadku należy odwołać się do właściwości zIndex obiektu style, schematycznie:

document.getElementById("id_warstwy").style.zIndex = wartość;

np.:

document.getElementById("wr1").style.zIndex = 100;

Ogólna zasada jest taka, że im wyższa wartość tego parametru, tym wyższy priorytet wyświetlania. Stąd warstwy o niższych wartościach z-index będą wyświetlane pod warstwami o wyższym z-index. To zagadnienie ilustruje kod z listingu 5.21.

Listing 5.21. Zmiana kolejności wyświetlania warstw za pomocą kliknięć

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    function ontop(id)

    {

      document.getElementById('wr1').style.zIndex = 0;

      document.getElementById('wr2').style.zIndex = 0;

      document.getElementById('wr3').style.zIndex = 0;

      document.getElementById(id).style.zIndex = 1;

    }

    </script>

  </head>

  <body>

    <div

      id="wr1"

      style="position:absolute;width:100px;height:100px;

             background-color:yellow;left:100px;top:60px;visibility:visible;"

    >

    </div>

    <div

      id="wr2"

      style="position:absolute;width:100px;height:100px;

             background-color:orange;left:70px;top:90px;visibility:visible;"

    >

    </div>

    <div

      id="wr3"

      style="position:absolute;width:100px;height:100px;

             background-color:red;left:130px;top:120px;visibility:visible;"

    >

    </div>

    <div>

    Wskazując pola wyboru, możesz decydować o kolejności:

    <br />

    <input

      type="radio"

      name="rd1"

      onclick="ontop('wr1');"

    >Pierwsza warstwa

    <input

      type="radio"

      name="rd1"

      onclick="ontop('wr2');"

    >Druga warstwa

    <input

      type="radio"

      name="rd1"

      onclick="ontop('wr3');"

    >Trzecia warstwa

    </div>

  </body>

</html>

Po uruchomieniu skryptu na ekranie pojawią się trzy warstwy oraz trzy pola typu radio, tak jak jest to widoczne na rysunku 5.8. Kliknięcie wybranego pola spowoduje przeniesienie przypisanej mu warstwy na wierzch, czyli będzie ona w całości widoczna. Jest to możliwe, gdyż każdemu polu została przypisana procedura obsługi zdarzenia onclick w postaci funkcji ontop, otrzymującej w postaci argumentu nazwę warstwy, która ma być w pełni widoczna.

Rysunek 5.8. Wybór kolejności wyświetlania warstw

Wewnątrz funkcji najpierw właściwości zIndex każdej z warstw jest przypisywana wartość 0, tak aby wszystkie znalazły się na tym samym poziomie wyświetlania, a następnie właściwości zIndex warstwy wskazanej przez argument id jest przypisywana wartość 1. Dzięki temu przesłoni ona pozostałe.

Zmiana wartości zIndex może się też odbywać automatycznie, to znaczy kolejność wyświetlania warstw będzie modyfikowana bez udziału użytkownika. Wystarczy w tym celu użyć metody setInterval obiektu window, tak jak zostało to zaprezentowane w skrypcie 5.22.

Listing 5.22. Automatyczna zmiana kolejności wyświetlania warstw

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    var tab = Array(1, 2, 3);

    function ontop()

    {

      document.getElementById('wr1').style.zIndex = tab[0];

      document.getElementById('wr2').style.zIndex = tab[1];

      document.getElementById('wr3').style.zIndex = tab[2];

      var temp = tab[0];

      tab[0] = tab[1];

      tab[1] = tab[2];

      tab[2] = temp;

    }

    function start()

    {

      setInterval("ontop();", 500);

    }

    </script>

  </head>

  <body onload="start()">

    <div

      id="wr1"

      style="position:absolute;width:100px;height:100px;

             background-color:yellow;left:100px;top:40px;visibility:visible;"

    >

    </div>

    <div

      id="wr2"

      style="position:absolute;width:100px;height:100px;

             background-color:orange;left:70px;top:70px;visibility:visible;"

    >

    </div>

    <div

      id="wr3"

      style="position:absolute;width:100px;height:100px;

             background-color:red;left:130px;top:100px;visibility:visible;"

    >

    </div>

  </body>

</html>

Warstwy są tu definiowane podobnie jak w poprzednim przypadku, sposób zmiany kolejności wyświetlania jest jednak inny. Proces ten jest rozpoczynany przez wywołanie funkcji start, która jest przypisana zdarzeniu onload sekcji body. Jej jedynym zadaniem jest wywołanie metody setInterval, która uruchamia cykliczne wywoływanie funkcji ontop.

Kolejność wyświetlania warstw jest określana przez zawartość tablicy tab. Komórka 0 określa pozycję warstwy wr1, 1 — warstwy wr2, a 2 — warstwy wr3. Ponieważ w każdym wywołaniu ontop oprócz odpowiednich przypisań jest również wykonywana zmiana zawartości tablicy — w taki sposób, że wszystkie komórki są przesuwane o jedną pozycję — na ekranie powstaje animacja przesłaniających się wzajemnie warstw.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15464231