The Dynamic Duo - Zamiana obrazków (Rollover)




loc = "../"






document.write(toccss)
document.write(tochtml)

Zamiana obrazków (Rollover)

Aby stworzyć naprawdę dynamiczne animacje i demonstracje, powinieneś opanować także sztukę zamiany obrazków na żądanie.

W tej lekcji nauczymy się dynamicznie zmieniać "imageA" na "imageB":


imageA.gif

imageB.gif


Pamiętaj, aby upewnić się, że oba obrazki mają dokładnie takie same wymiary, w przeciwnym razie, podczas zamiany, nowy obrazek zostanie wpasowany w taki sposób, aby zajął dokładnie tyle samo miejsca. W przypadku, kiedy będziesz chciał zamienić obrazki o różnych wymiarach, nie będziesz mógł skorzystać z tego kodu. Spróbuj wtedy po prostu opcji chowania i pokazywania osobnych warstw.

Na początek musimy pokazac jeden z obrazków - niech to będzie obrazek "imageA" na warstwie DIV nazwanej "imgDiv":

<DIV ID="imgDiv">
<IMG NAME="myImg" SRC="imageA.gif" WIDTH=75 HEIGHT=75 BORDER=0>
</DIV>


Zauważ, że do tagu IMG została dodana nazwa (NAME) "myimg", zostanie ona wykorzystana podczas zamiany obrazków. Nazwa musi być unikalna, w szczególności nie może być taka sama jak nazwa warstwy DIV na której obrazek się znajduje. Zwykle dodaję "Img" na końcu nazwy, tak jak to robię z "Div" w nazwie (ID) warstwy, w ten sposób unikam konfliktu nazw.

Wcześniejsze ładowanie obrazków (preload)

Zanim będziemy mogli zmienić obrazek, musimy go załadować do cache-a przeglądarki. A oto prosty kod, który preloaduje obrazek:

imagename = new Image();
imagename.src = "imagefilename.gif";


Kod ten tworzy nam obiekt "image" związany z obrazkiem. W ten sposób uzyskujemy obiekt przez który możemy wywołać obrazek w dowolnej chwili. Jak tylko będziemy potrzebowali zamienić obrazki - będzie już dostępny, nie będzie trzeba czekać na ściągnięcie z sieci obrazka, ponieważ już będzie w cache przeglądarki.. Ponieważ będziemy potrzebowali obydwu obrazków, musimy napisać kod, który załaduje nam je do cache.


imageA = new Image();
imageA.src = "imageA.gif";
imageB = new Image();
imageB.src = "imageB.gif";


Funkcja preload()
Im więcej obrazków będziesz chciał preloadować, tym bardziej nie będzie Ci się podobała koniecznośc pisania wciąż tych dwóch samych linii kodu. Tak więc zamiast się tak męczyć stwórzmy sobie prostą funkcję, której jednolinijkowe wywołanie wykona za nas całą robotę:


function preload(imgObj,imgSrc) {
if (document.images) {
eval(imgObj+' = new Image()')
eval(imgObj+'.src = "'+imgSrc+'"')
}
}


gdzie:

imgObj - nazwa obiektu połączonego z obrazkiem
imgSrc - plik z obrazkiem (url do pliku)


Przykłady:


preload('imageA','imageA.gif')
preload('imageB','imageB.gif')


Lepiej jest preloadować obrazki podczas ładowania strony, niż czekać z tym aż do końca, więc polecam zawsze wywoływać funkcję preload() natychmiast po jej zdefiniowaniu.

Zamiana obrazka

Kiedy obrazki mamy już w cache, możemy dostać się do nich i zmienić je wszystkie na stronie. Zamiana obrazków znajdujących się na warstwach działa trochę inaczej w Netscapie i w IE, więc najpierw zademonstruję kod zmieniający dla każdej przeglądarki z osobna, a potem napiszemy funkcję działającą w obydwu sytuacjach.

Jeśli obrazek nie jest na warstwie, standardowym sposobem jego zmiany jest:


document.images["imageName"].src = imageObject.src


Gdzie imageName jest nazwą którą nadaliśmy w tagu IMG, i imageObject jest nazwą obiektu połączonego z preloadowanym obrazkiem.

Więc w naszym przykładzie możemy użyć:


document.images["myImg"].src = imageB.src


Musimy pamiętać, że ten kod zadziała tylko w przypadku, kiedy obrazek nie jest umieszczony na warstwie. Jeśli jest - sytuacja trochę się nam zmienia.

W Netscape, musimy odwołać się do warstwy DIV na której znajduje się obrazek. W naszym przykładzie warstwa ta to imgDiv, więc musimy dodać document.imgDiv.document na początku kodu:


if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src


Dodatkowe słowo "document" pomiędzy nazwą warstwy DIV i obrazkiem jest konieczne, ponieważ Netscape traktuje warstwy DIV's jako całkowicie osobne dokumenty.

Natomiast w IE nie musimy tego robić, więc kod wygląda tak, jakby obrazek nie znajdował się na warstwie.


if (ie4) document.images["myImg"].src = imageB.src


I już. Wszystko co teraz musimy zrobić to połączenie kodu w jedną funkcję i wywołanie jej wtedy, kiedy chcemy zamienić obrazek:


function changeToA() {
if (ns4) document.imgDiv.document.images["myImg"].src = imageA.src
if (ie4) document.images["myImg"].src = imageA.src
}

function changeToB() {
if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src
if (ie4) document.images["myImg"].src = imageB.src
}


Zobacz images1.html jako szybki przykład użycia tych dwóch funkcji.

Funkcja changeImage()

Funkcja changeImage() eliminuje konieczność definiowania oddzielnych funkcji dla każdej zmiany obrazka. Wystarczy przekazać jej nazwę warstwy DIV, na któej jest obrazek, nazwę obrazka i nazwę preloadowanego obiektu (obrazka) - layer, imgName i imgObj:


function changeImage(layer,imgName,imgObj) {
if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
else document.images[imgName].src = eval(imgObj+".src");
}


W naszym przykładzie możemy zamienić funkcję changeToA() na:


changeImage('imgDiv','myImg','imageA')


I to samo dla imageB:


changeImage('imgDiv','myImg','imageB')


Zobacz images2.html jako przykład użycia funkcji changeImage().

Notatka:
Funkcja changeImage() może być także użyta dla zagnieżdżonych warstw, wtedy jako argument layer musimy podać parentLayer.document.childLayer, w sposób podobny do odwoływania się do zagnieżdżonych warstw.
Można tez użyć tej funkcji dla obrazków nie znajdujących się na warstwach, wystarczy podac null jako argument layer.


changeImage(null,'myImg','imageB')


Also, the changeImage() function is backward compatible. If you have a layers page and view it in Netscape 3, the function will still work properly. You can try it out by viewing any of these examples with that browser. No other browser is capable of changing images, so if you wanted to error check for the ability to change images you can use this alteration of the changeImage() function:

Funkcja changeImage() jest także kompatybilna wstecz. Jeśli masz stronę z warstwami i oglądasz ją w Netscape 3, funkcja ta będzie działała prawidłowo. Możesz to sprawdzić przez obejrzenie przykładów w tej przeglądarce. Niestety, ponieważ żadna inna przeglądarka nie jest zdolna do zamiany obrazków, więc jeśli chcesz sprawdzić czy dana przeglądarka to potrafi, możesz użyć rozszerzonej wersji funkcji changeImage().


function changeImage(layer,imgName,imgObj) {
if (document.images) {
if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src')
else document.images[imgName].src = eval(imgObj+".src")
}
}


Obydwie funkcje - changeImage() i preload() są częścią DynAPI i znajdują się w pliku images.js:

Kod źródłowy

Ściągnij: images.js
Obejrzyj źródło: images.js

Rollover

Wydawało mi się, że rollover jako technika używana na stronach zmarł śmiercią naturalną, więc nie zaprzątałem sobie nim głowy, jednakże ponieważ bardzo wiele osób pytało mnie o to, postanowiłem szybko pokazać jak to zrobić wykorzystując funkcję changeImage().

Idea stojąca za tym tajemniczym słowem jest bardzo prosta - Kiedy przesuwasz myszkę nad obrazkiem, ten zmienia się na inny, kiedy kursor myszki przesuwasz znad niego, ten wraca do poprzedniego. Aby tego dokonać, musimy opakować tag IMG w link (tag A) i wywołać funkcję changeImage() korzystając ze zdarzeń onMouseOver i onMouseOut. Zdarzenia te muszą być wywoływane z linka (tag A) ponieważ w Netscape tag IMG nie posiada tych zdarzeń wbudowanych.

Pamiętaj, że musisz gdzieś skierować link zanim go użyjesz. Najczęściej rollover stosowany jest w menu, więc pewnie podepniesz pod niego kolejną stronę. Jednakże w sytuacjach kiedy nie chcesz nigdzie kierować linka możesz użyć konstrukcji javascript:void(null) w polu HREF. Ta komenda nie robi dokładnie nic. Link nadal istnieje, ale wywołuje skrypt który nic nie robi.


<DIV ID="imgDiv">
<A HREF="javascript:void(null)"
onMouseOver="changeImage('imgDiv','myImg','imageB')"
onMouseOut="changeImage('imgDiv','myImg','imageA')">
<IMG NAME="myImg" SRC="imageA.gif" WIDTH=75 HEIGHT=75 BORDER=0></A>
</DIV>


Zobacz images3.html jako przykład techniki rollover.


Strona główna
Następna lekcja:
Ograniczanie widoczności warstw (Clipping)


copyright 1998 Dan Steinman