JavaScript dla każdego
//  wróć   główna   dalej  //

Pliki graficzne

src name images selectedIndex

JavaScript pozwala zamienić zawartość obrazka zdefiniowanego przy pomocy HTML-a na inny. Może się to odbyć np. z zastosowaniem formularza wyboru: <SELECT>. Wybierając pole formularza można zamienić rysunek na inny wcześniej zdefiniowany (i najlepiej załadowany do przeglądarki). Przykładowa funkcja wygląda tak:

function Rysunek(nr)
{
 if (nr==0) {Nowy="ryba.gif"};
 if (nr==1) {Nowy="donald.gif"};
 if (nr==2) {Nowy="rekin.gif"};
 if (nr==3) {Nowy="kot.gif"};
 document.Obrazek.src=Nowy
}

Nazwa Obrazek jest nazwą rysunku, który chcemy zamienić. Właściwość scr określa, że JavaScript ma zmienić ścieżkę pliku zawierającego rysunek, a nie np. szerokość. Rysunek definiujemy klasycznie przy pomocy kodu HTML. Różnica polega na tym, że konieczna jest nazwa obrazka nadana parametrem NAME jednoznacznie identyfikująca dany rysunek. Nazwa nie jest konieczna, gdy wykorzystana została tablica (więcej I>>) images zawierająca wszystkie obrazki na stronie. W tym przypadku definicja obrazka wygląda następująco:

<IMG SRC="ryba.gif" NAME="Obrazek">

Formularz, który pozwoli na wybór obrazka wygląda tak:

<FORM>
Wybierz rysunek:
<SELECT onChange="Rysunek(this.selectedIndex)">
<OPTION VALUE=ryba SELECTED>ryba
<OPTION VALUE=donald>donald
<OPTION VALUE=rekin>rekin
<OPTION VALUE=kot>kot
</SELECT>
</FORM>

A efekt na stronie jest następujący:



Wybierz rysunek:

Po zmianie opcji formularza uaktywnia się zdarzenie onChange. Wywołuje funkcję z wartością obecnego indeksu opcji, czyli z numerem pola, które zostało zaznaczone (wartość indeksu mają wartości zaczynające się od zera). Następnie w funkcji następuje przyporządkowanie każdemu z numerów indeksu pewien plik. Ostatnia linijka funkcji zamienia źródło obiektu o nazwie Obrazek na nowo przypisane źródło Nowy. Warto zatroszczyć się o jednolitość wymiarów obrazków, bo mogą się przydarzyć nieprzyjemne wypadki, kiedy duży obrazek zostanie załadowany na miejsce małego i strona zostanie dziwnie rozciągnięta.


Zobacz przykład

Często stosowanym elementem urozmaicenia stron jest podmienianie obrazków po najechaniu lub kliknięciu na niego myszką. Wszystkim steruje zdarzenie onMouseOver oraz onMouseOut. Zamiana polega na zamianie źródła obrazka.

Aby móc swobodnie korzystać z tego zdarzenia, warto każdemu obrazkowi nadać niepowtarzalną nazwę. By nie definiować źródła każdego pliku graficznego, wprowadziłem pewne uproszczenie. Nazwy plików graficznych będą kolejnymi cyframi z rozszerzeniem gif. Nazwy rysunków w tagach będą równe AxA, gdzie x jest kolejną cyfrą. Użycie liter pomaga poprawnie zdefiniować i obsługiwać obiekty typu image:

<A HREF="plik1.html" onMouseOver="On(1)" onMouseOut="Off(1)">
  <IMG SRC="graph/1.gif" NAME="A1A"></A>
<A HREF="plik2.html" onMouseOver="On(2)" onMouseOut="Off(2)">
  <IMG SRC="graph/2.gif" NAME="A2A"></A>
<A HREF="plik3.html" onMouseOver="On(3)" onMouseOut="Off(3)">
  <IMG SRC="graph/3.gif" NAME="A3A"></A>

Nazywanie pliku kolejnymi cyframi nie jest może zbyt wygodne, ale nie wymaga wprowadzania zmiennych, które zawierałyby wszystkie źródła plików.

Funkcja On odpowiada za zamienianie źródła, kiedy myszka najedzie na obrazek. Funkcja Off przywraca pierwotny obrazek:

function On(z) {document.images["A"+z+"A"].src="graph/"+z+"0.gif";}
function Off(z) {document.images["A"+z+"A"].src="graph/"+z+".gif";}

Przekazany do funkcji argument jednoznacznie określa, który obrazek należy zamienić i na jakie źródło. Pliki graficzne, które zawierają obrazek do podmienienia nazywa się tak samo jak te podstawowe. Różnica polega tylko na tym, że pliki wywoływane mają w nazwie jeszcze zero. Jeżeli więc plik podstawowy nazywa się 1.gif, źródło zamienianego gifa nazywa się 10.gif.

Wadą takiego rozwiązania jest fakt, że pliki są ściągane dopiero po wskazaniu na nie myszką. To powoduje, że jeśli pliki podmieną się dopiero po kilku sekundach - w zależności od czasu potrzebnego na ich ściągnięcie. Takie rozwiązanie jest dobre, kiedy jest pewność, że pliki będą się bardzo szybko ładowały, czyli przy wersjach offline.

By funkcja była uniwersalna pliki zastępcze muszą się załadować jak najszybciej. Najlepiej, by ładowały się tak samo, jak pozostałe gify, czyli przy pobieraniu strony z Sieci. Poniższe funkcje tworzą obiekty Image, którym przyporządkowują obrazki. Nie będą widoczne, ale przeglądarka natychmiast je ściągnie na dysk.

function Download(Img)
{
 n=new Image();
 return n.src=Img;
}

Podmien();
function Podmien()
{
 Adres=new Array("plik1.gif", "plik2.gif", "plik3.gif");
 for (i=0; i<Adres.length; i++) Adres[i]=Download(Adres[i]);
}

Jeśli wszystkie pliki są w tym samym katalogu i mają to samo rozszerzenie, to można przechować w tablicy Adres tylko nazwy bez rozszerzeń i ścieżek. Wspólną część nazwy można przenieść do funkcji.


Taki układ nazw plików daje się łatwo modyfikować, gdyby menu się zmieniło. Należałoby tylko stworzyć nowe pliki graficzne i tagi wg. wzoru.

Jeśli na Twojej stronie pojawiają się banery reklamowe, to nie używaj polecenia images.length. Jeśli nie kontrolujesz tego, co się pojawia na Twoich stronach, polecenie to może okazać się przyczyną nieprawidłowych akcji. Twoja tablicy będzie miała inną wielkość, niż planowana.


Do góry