Ukrywanie warstw
Tematem kilku następnych kroków
będzie manipulacja warstwami przy użyciu języka JavaScript. Występują tutaj
pewne niezgodności pomiędzy przeglądami Navigator i Internet Explorer.
Aby strona miała podobny wygląd
zarówno pod Navigator jak i pod Internet Explorer należy napisać oddzielny
kod dla obu przeglądarek.
Pierwszym krokiem jest sprawdzenie
rodzaju przeglądarki. Najłatwiej zrobić to tak jak poniżej:
nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;
Jeżeli używasz przeglądarki
firmy Netscape, zmiennej nn4 zostanie przypisana wartość true. W przeciwnym
wypadku wartość false. Podobnie ze zmienną ie4 dla przeglądarki Internet
Explorer. Teraz wystarczy uzależnić od wartości zmiennych nn4 i ie4 wykonywanie
odpowiednich poleceń:
if (nn4) { polecenia dla przeglądarki
Netscpae Navigator }
else
if(ie4) { polecenia dla przeglądarki
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:
Internet Explorer:
document.all["nazwa_warstwy"];
Ukrywanie warstw możliwe jest
dzięki właściwości style.visibility. Właściwość ta może przyjmować wartości
hidden (warstwa ukryta) lub visible (warstwa widoczna).
Navigator:
document.layers["nazwa_warstwy"];
Ukrywanie warstw możliwe jest
dzięki właściwości visibility.
Poniższy
przykład pokazuje w jaki sposób można ukrywać lub pokazywać warstwy. Dzięki
niemu zrozumiesz jak ważną rolę w DHTML-u pełni znajomość języka JavaScript.
<HTML>
<HEAD>
<META
HTTP-EQUIV="Content-type"CONTENT="text/html;
charset=windows-1250">
<STYLE TYPE="text/css">
<!--
#warstwa1 { position:
absolute; left: 50; top: 120; width: 300; height: 150; clip:rect(0,300,150,0);
background-color:yellow; layer-background-color:yellow;
visibility: hidden }
#warstwa2 { position: absolute;
left: 100; top: 170; width: 300; height: 150; clip:rect(0,300,150,0);
background-color:blue; layer-background-color:blue;
visibility: hidden }
#warstwa3 { position: absolute;
left: 150; top: 220; width: 300; height: 150; clip:rect(0,300,150,0);
background-color:red; layer-background-color:red;
visibility: hidden }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;
function klikniecie(nacisniecie,nazwa)
{
if (ie4){ if (nacisniecie)
{
document.all[nazwa].style.visibility='visible'
}
else
{
document.all[nazwa].style.visibility='hidden'
}
}
else { 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>
zanotowane.pldoc.pisz.plpdf.pisz.plteen-mushing.xlx.pl