Tym razem zajmiemy się podmianą obrazków na stronie. Z wykorzystaniem “lekkiej nutki fantazji”, technika ta może zmienić naprawdę dużo na Waszych stronach – wnieść elementy interaktywne.
Zaczynamy
Zasada działania skryptu jest prosta. Podczas wywołanego zdarzenia np. OnMouseOver skrypt zmienia źródło jakiegokolwiek obrazka na stronie. Wszystko dzieje się “na żywo”, czyli zawartość strony zmienia się dynamicznie.
Na początku zamienimy jeden obrazek, po najechaniu na niego myszką. Użyjemy do tego dwa obrazki czerowny.gif i niebieski.gif . Obrazek będzie linkiem a gdy najedziemy na niego myszką zmieni się na drugi. Oto jak wygląda skrypt:
| <html> <head><title>pierwszy skrypt</title></head> |
<body>
| <a href=”strona.htm” onMouseOver=”document.rysunek.src=’niebieski.gif’ ” onMouseOut=”document.rysunek.src=’czerwony.gif’ “> <img src=”czerwony.gif” border=”0″ name=”rysunek”> </a> </body> </html> |
Na początku określamy zdarzenie onmouseover (czyli najechanie wskaźnikiem myszy na element). Podczas tego zdarzenia wywoływana jest instrukcja
document.rysunek.src=’czerwony.gif’ .
Co ona oznacza? Najpierw odnosimy się do najbardziej zewnętrznej części strony internetowej czyli document. Następnie odwołujemy się do elementu rysunek (jest to nazwa obrazka który chcemy zmienić). Na końcu umieszczamy src – oznacza to, że zmieniamy źródło elementu rysunek (naszego obrazka).
Aby lepiej zrozumieć tą konstrukcję, należy prześledzić hierarchię elementów w JavaScript. Zasada jest prosta: zaczynamy od najbardziej zewnętrznego a kończymy na poszczególnym elemencie strony.
Był to najprostszy skrypt podmieniający obrazki. Jednak gdy użyjemy go na stronie zauważymy, że po najechaniu myszką, obrazek który ma się pojawić zaczyna się dopiero wczytywać. W wyniku czego brakuje płynności. Tutaj także możemy posłużyć się javascriptem aby rozwiązać ten problem:
| <script language=’javascript’>
obrazek1=new Image obrazek1.src=’niebieski.gif’ </script> |
W ten sposób podczas wczytywania się strony, załadują się dwa obrazki.
Następnie w źródle strony piszemy:
| <a href=”strona.htm” onMouseOver=”document.rysunek.src=obrazek1.src” onMouseOut=”document.rysunek.src=obrazek2.src”> <img src=”czerwony.gif” border=”0″ name=”rysunek”> </a> |
Tym razem odwołaliśmy się nie do konkretnego pliku obrazka tylko do elementu obrazek1.src i obrazek2.src którym w skrypcie dopisaliśmy źródło.
Istnieje możliwość podmiany kilku obrazków na raz. Ale to już zadanie domowe 🙂
