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.
