Tajniki DHTML


Zmiana obrazków

Znając metody ukrywania i pokazywania warstw, można łatwo uzyskać efekt zamiany rysunku na stronie. W tym celu należy napisać funkcję, która na żądanie schowa jedną warstwę i pokaże drugą (lub odwrotnie). Oto jej przykład:

<SCRIPT LANGUAGE="JavaScript">

<!-

function change(A,B) {

hide(A); // zapis tych funkcji był pokazany wcześniej

show(B);

}

//->

</SCRIPT>

<BODY>

<DIV ID="foto1Div" STYLE="position: absolute; left:10; top:100;">

<IMG SRC="rysunek1.gif" WIDTH=20 HEIGHT=20 BORDER=0></DIV>

<DIV ID="foto2Div" STYLE="position: absolute; left:10; top:100; visibility:hidden;">

<IMG SRC="rysunek2.gif" WIDTH=30 HEIGHT=30 BORDER=0></DIV>

<A HREF="javascript:change('foto1Div','foto2Div')">Zmiana 1 na 2</A>

<A HREF="javascript:change('foto2Div','foto1Div')">Zmiana 2 na 1</A>

</BODY>

W przykładzie widać, że obie grafiki mają różne rozmiary. Jest to rzadko spotykane w praktyce, ale do celów demonstracyjnych specjalnie ustawiono różne wartości. Dzięki temu rozwiązaniu nie trzeba podmieniać zdjęć o identycznych rozmiarach, ale ma ono jedną wadę. Należy zapisać w kodzie dwie warstwy, nadając im odpowiednie nazwy i właściwości, co spowoduje zwiększenie rozmiaru kodu. Większość programistów wykonywała to w inny sposób, a mianowicie przez zamianę tylko grafiki zapisanej na stronie. W takim przypadku obie grafiki muszą mieć identyczny rozmiar. Dodatkowo należy wczytać oba obrazki do pamięci podręcznej, aby zamiana odbyła się szybko, bo w przeciwnym wypadku przeglądarka bę-dzie doczytywać zamienianą grafikę i wszystko potrwa zbyt długo.

Aby załadować grafikę, należy utworzyć obiekt Image. Następnie właściwość src powinna zawierać ścieżkę do grafiki. Poniżej przedstawiony jest kod realizujący wczytywanie grafiki:

foto1 = new Image();

foto1.src = "rysunek1.gif";

Teraz można wstawić grafikę na stronę i zapisać odpowiednią funkcję zmieniającą grafikę. Funkcja ta w porównaniu do poprzedniej ma tylko jeden argument, a mianowicie nazwę obrazka. Poniżej przedstawiony jest cały kod realizujący to zadanie:

<SCRIPT LANGUAGE="JavaScript">

<!-

foto1 = new Image();

foto1.src = "rysunek1.gif";

foto2 = new Image();

foto2.src = "rysunek2.gif";

function change(foto) {

document.images.fotoImg.src=foto.src;

}

//->

</SCRIPT>

<BODY>

<IMG SRC="rysunek1.gif" NAME="fotoImg" WIDTH=30 HEIGHT=30 BORDER=0>

<A HREF="javascript:change(foto2)">Zmiana 1 na 2</A>

<A HREF="javascript:change(foto1)">Zmiana 2 na 1</A>

</BODY>

Należy zwrócić uwagę na dodatkową wartość w znaczniku IMG. Jest to nazwa obiektu zapisana jako NAME="fotoImg". Za pomocą tej nazwy można się do obiektu odwoływać i zmieniać jego właściwości. Jak widać, kod źródłowy jest znacznie mniejszy. Należy pamiętać, że w poprzednim przypadku brakuje zapisu funkcji hide() i show().

To rozwiązanie można połączyć z zastosowaniem warstw w przypadku gdy rysunek ma się znaleźć w określonym miejscu, podanym we właściwościach warstwy. Jak poprzednio, należy inaczej zapisać takie rozwiązanie dla NetscapeŐa, a inaczej dla Explorera.

Dla Explorera nie ma znaczenia, czy obrazek jest na warstwie czy nie. Do jego właściwości można dotrzeć przez jego nazwę, tak jak pokazano w poprzednim przykładzie. Aby zmienić obrazek na nowy, należy zapisać następujące wyrażenie:

document.images.fotoImg.src=foto.src;

gdzie fotoImg jest nazwą nadaną w znaczniku IMG, a foto jest nazwą obiektu odczytywanego na początku kodu strony. W Netscapie, aby zmienić obrazek, najpierw należy odwołać się do warstwy a następnie do obiektu Image. Teraz, jeżeli chcemy dokonać zmiany rysunku leżącego na warstwie, należy zapisać następujący kod:

document.nameDiv.document.images.fotoImg.src=foto.src;

Należy pamiętać o słowie document między nazwą warstwy a nazwą obrazka.

Przeglądarka Netscape traktuje warstwy jako odrębne dokumenty. Aby zmienić obrazek z poprzedniego przykładu, znajdujący się na warstwie, należy zapisać odpowiednią funkcję.

Musi ona na początku wykryć przeglądarkę i, w zależności od wyniku rozpoznania, wykonać kod odpowiedni dla przeglądarki. Poniżej przedstawiono odpowiedni wzór:

<SCRIPT LANGUAGE="JavaScript">

<!-

foto1 = new Image();

foto1.src = "rysunek1.gif";

foto2 = new Image();

foto2.src = "rysunek2.gif";

function change(foto) {

if (ie4) {

document.images.fotoImg.src=foto.src;

} else if (ns4) {

document.nameDiv.document.images.fotoImg.src=foto.src;

}

}

//->

</SCRIPT>

<BODY>

<DIV ID="nameDiv" STYLE="position: absolute; left:10; top:100;">

<IMG SRC="rysunek1.gif" NAME="fotoImg" WIDTH=30 HEIGHT=30 BORDER=0>

</DIV>

<A HREF="javascript:change(foto2)">Zmiana 1 na 2</A>

<A HREF="javascript:change(foto1)">Zmiana 2 na 1</A>

</BODY>