[ Pobierz całość w formacie PDF ]
.Jeœli chodzi o nowezmienne, perLyr okreœla na przyk³ad liczbê wyszukiwarek, które maj¹ byæwyœwietlane na warstwie.Zmienne engWdh i engHgt opisuj¹ domyœln¹ szerokoœæi wysokoœæ poszczególnych warstw.Zmienne left i top s³u¿¹ do pozycjonowaniawarstw.Zmienna arrayHandles zawiera tablicê u¿ywan¹ do wstêpnego ³adowaniaobrazków.Bêdzie jeszcze o tym mowa w dalszej czêœci rozdzia³u.Przyjrzyjmy siê funkcjom z wierszy 142–156:function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy) {if (NN) {document.writeln('' +copy + '');}else {document.writeln('' + copy + '');}}oraz z wierszy 163–177:function hideSlide(name) { refSlide(name).visibility = hideName; }function showSlide(name) { refSlide(name).visibility = showName; }function refSlide(name) {if (NN) { return document.layers[name]; }else { return eval('document.all.' + name + '.style'); }}function changeSlide(offset) {hideSlide('slide' + curSlide);curSlide = (curSlide + offset < 0 || curSlide + offset >= lyrCount ?(curSlide + offset < 0 ? lyrCount - 1 : 0) : curSlide + offset);showSlide('slide' + curSlide);}Jest tu piêæ funkcji: genSlide(), refSlide(), hideSlide(), showSlide() ichangeSlide().Wszystkie dzia³aj¹ podobnie jak w rozdziale 3.; jeœli czegoœnie pamiêtasz, po prostu wróæ do tego rozdzia³u.Istniej¹ te¿ dwie nowefunkcje: imagePreLoad() i imageSwap(), które maj¹ te same zadania, ale zosta³yzmodyfikowane na tyle, ¿e zasadne jest ich ponowne omówienie.Dynamiczne ³adowanie obrazkówJednym z wielkich paradygmatów Sieci jest dynamiczne przeprowadzenie operacjizasadniczo statycznych.Po co robiæ coœ statycznie, skoro mo¿na znaczniewygodniej dokonaæ „w biegu”? Tak w³aœnie dzieje siê zazwyczaj ze wstêpnym³adowaniem obrazków.Jak tego wygl¹da wstêpne ³adowanie obrazków, którychchcesz u¿yæ do przewijanego menu? Mo¿e to byæ kod mniej wiêcej taki:var myImage1On = new Image();myImage1On.src = 'images/myImgOn1.gif'var myImage1Off = new Image();myImage1Off.src = 'images/myImgOff1.gif';Wydaje siê to ca³kiem proste, jednak do opisania jednej pary obrazków potrzebnenam by³y cztery wiersze kodu, a co siê stanie, jeœli par bêdzie piêæ czydziesiêæ? Potrzebowalibyœmy 20 lub 40 wierszy.Jeœli tylko zaczniemy robiæjakieœ zmiany, natychmiast zrobi siê kompletny ba³agan.W tej aplikacjiprzedstawimy sposób poradzenia sobie z ³adowaniem dowolnej (teoretycznie)liczby par obrazków.Bêdziemy potrzebowaæ trzech rzeczy:Tablicy obiektów Image dla ka¿dego zestawu obrazków.W aplikacji tej u¿ytazostanie jedna tablica obrazków, nad którymi znajduje siê wskaŸnik myszy,i jedna dla obrazków bez wskaŸnika.Prostej konwencji nazewniczej dla obrazków.Doskonale nada nam siê nazewnictwotypu myImg1On.gif / myImg1Off.gif.W rozdziale 3.mo¿na znaleŸæ ramkêomawiaj¹c¹ kwestie nazewnictwa znacznie dok³adniej.Nasze nazewnictwo obejmowaæmusi nazwy tablic z punktu 1.Metody eval().Jeœli chodzi o punkt 1., w aplikacji u¿yjemy dwóch tablic.Jedna nazwanazostanie out i zawieraæ bêdzie obiekty Image odpowiadaj¹ce obrazkom,nad którymi nie ma wskaŸnika myszy.Druga tablica – o nazwie – over i bêdziezawieraæ obiekty Image z obrazkami, nad którymi akurat jest wskaŸnik myszy.Zmienne te bêd¹ od teraz reprezentowane przez wartoœci tablicy arrayHandlesz wiersza 20:var arrayHandles = new Array('out', 'over');Kwestiê konwencji nazewnictwa rozwi¹¿emy bardzo prosto.Pary obrazków bêd¹mia³y ten sam pocz¹tek, za którym znajdzie siê out.jpg lub over.jpg,w zale¿noœci od tego, o który obrazek z pary chodzi.Na przyk³ad obrazkizwi¹zane z InfoSeek bêd¹ nazywa³y siê infoseekout.jpg i infoseekover.jpg.Jeœli chodzi o punkt 3., najpierw przejdziemy po wszystkich elementach tablicyarrayHandles i u¿ywaj¹c funkcji eval(), utworzymy tablice na obiekty Image –oto wiersze 22 do 24:for (var i = 0; i < arrayHandles.length; i++) {eval('var ' + arrayHandles[i] + ' = new Array()');}Wykonanie powy¿szej pêtli for odpowiada nastêpuj¹cym instrukcjom:var out = new Array();var over = new Array();Aby ³adowanie obrazków jeszcze trochê dopracowaæ, u¿yjemy znów funkcji eval() wimagePreLoad() do dynamicznego utworzenia obiektów Image i przypisania imw³aœciwoœci SRC.Oto funkcja z wierszy 104–110:function imagePreLoad(imgName, idx) {for(var j = 0; j < arrayHandles.length; j++) {eval(arrayHandles[j] + "[" + idx + "] = new Image()");eval(arrayHandles[j] + "[" + idx + "].src = '" + imgPath +imgName + arrayHandles[j] + "
[ Pobierz całość w formacie PDF ]