[ Pobierz całość w formacie PDF ]
.Wszystko, co trzeba jeszcze zrobiæ, to tylko zmieniæ nazwê na ma³e litery,czym zajmuje siê funkcja nameFormat() w wierszach 158–161:function nameFormat(str) {var tempArray = str.split(' ');return tempArray.join('').toLowerCase();}Usuwane s¹ wszystkie spacje przez podzielenie napisu na ka¿dej spacjii umieszczenie fragmentów w tablicy, nastêpnie fragmenty te s¹ ³¹czone.TerazimgName zawiera wartoœæ zapisan¹ samymi ma³ymi literami, bez spacji.Wynikmo¿na wraz z imgIdx przekazaæ imagePreLoad() w wierszu 128.Tworzenie ³¹czaPrzyszed³ czas na stworzenie obrazka z ³¹czem z odpowiednim kodem obs³uguj¹cymzdarzenia myszy – wiersze 129–135:engLinkStr += '' + '';Przyjrzyjmy siê teraz temu.Ka¿de ³¹cze wyszukiwarki musi spe³niaæ czterywarunki:zawieraæ kod wywo³uj¹cy odpowiedni¹ przegl¹darkê przy klikniêciu na obrazku,zawieraæ kod obs³ugi zdarzenia onMouseOver,zawieraæ kod obs³ugi zdarzenia onMouseOut,zawieraæ znacznik IMG z niepowtarzaln¹ wartoœci¹ atrybutu NAME i atrybutem SRCwskazuj¹cym odpowiedni plik.Rozbicie napisu zawartego w engLinkStr poka¿e sposób spe³nienia powy¿szychwarunków.Punkt pierwszy:HREF="javascript: callSearch(document.forms[0].elements[0].value, ' +imgIdx + ');"Utworzone i klikniête ³¹cze wywo³a funkcjê callSearch(), której bêdzieprzekazana wartoœæ document.forms[0].elements[0].value wraz z odpowiednimimgIdx.Wiêcej informacji o callSearch() pojawi siê wkrótce.Teraz mo¿naspokojnie stwierdziæ, ¿e wymaganie pierwsze mamy z g³owy.Punkt drugi:'onMouseOver="hideStatus(); imageSwap(\'' + imgName + '\', ' +imgIdx + ', 1); return true" ' +Kod ten umo¿liwia utworzenie wywo³ania hideStatus() w celu wyczyszczenia paskastanu, a póŸniej wywo³anie imageSwap(), która dostaje trzy parametry: imgName,imgIdx oraz liczbê ca³kowit¹ 1, odpowiadaj¹c¹ elementowi w arrayHandles.Punkt trzeci:'onMouseOut="imageSwap(\'' + imgName + '\', ' + imgIdx + ', 0);">' +Niewiele siê tutaj zmienia.Jedyne, co warto zauwa¿yæ, to przekazanie 0zamiast 1.I wreszcie punkt czwarty:'';Nazwa ka¿dego obrazka ustawiana jest na wartoœæ imgName.W ten sposób bêdziemyodwo³ywaæ siê do obrazków w funkcji imageSwap().Dla atrybutu SRC ustala siê zkolei wartoœæ bêd¹c¹ z³¹czeniem imgPath, imgName i out.jpg.Jako ¿e obrazkinajpierw bêd¹ pokazywane jako nieaktywne, SRC ma pocz¹tkowo koñcówkê out.jpg.Na przyk³ad pocz¹tkowy obrazek wyszukiwarki HotBot znajduje siê w plikuimages/hotbotout.jpg.W wierszach 137 i 138 koñczymy:engLinkStr += '';genLayer('slide' + i, left, top, engWdh, engHgt, hideName, engLinkStr);Zatem do engLinkStr do³¹czamy domkniêcie znacznika tabeli HTML i pozostajetylko wywo³aæ genLayer(), aby utworzyæ now¹ warstwê.Warto zwróciæ uwagê na to,¿e genLayer()jest wywo³ywana z parametrem false, aby warstwa by³a niewidoczna– póki strona nie zostanie za³adowana.Nastêpnie w obs³udze zdarzenia onLoadw wierszu 201 pokazywany jest slajd slide0.imageSwap()Tê funkcjê widzieliœmy w rozdziale 3., ale ta wersja jest nieco inna.Obejrzyjmy wiersze 179 do 182:function imageSwap(imagePrefix, imageIndex, arrayIdx) {document[imagePrefix].src = eval(arrayHandles[arrayIdx] +"[" + imageIndex + "].src");}Funkcja ta realizuje przewijanie obrazków.Parametr imagePrefix wskazuje, któryobrazek ma byæ w³¹czony.Parametry imageIndex i arrayIdx to liczby ca³kowites³u¿¹ce do odwo³ania siê do odpowiedniego obiektu Image w tablicyarrayHandles.callSearch()Kiedy formularze HTML i warstwy s¹ ju¿ na swoim miejscu, u¿ytkownik musi tylkowprowadziæ wyszukiwany tekst i klikn¹æ wybran¹ wyszukiwarkê.Jeœli u¿ytkownikkliknie jeden z obrazków, wywo³ywana jest funkcja callSearch().Przyjrzyjmy siêjej w wierszach 184–193:function callSearch(searchTxt, idx) {if (searchTxt == "") {parent.frames[2].location.href = engines[idx][2] +escape(searchTxt);}else {parent.frames[2].location.href = engines[idx][1] +escape(searchTxt);}}callSearch() oczekuje dwóch nastêpuj¹cych argumentów: searchTxt to tekstwprowadzony przez u¿ytkownika, idx to liczba oznaczaj¹ca wyszukiwarkêw tablicy.Aplikacja ³aduje jeden z dwóch dokumentów do frames[2].Jeœliu¿ytkownik nie wprowadzi ¿adnego tekstu, do frames[2] ³adowana jest domyœlnastrona domowa przegl¹darki.Ten adres URL znajduje siê w elemencie 2.poszczególnych tablic.Jeœli jednak u¿ytkownik wprowadzi wyszukiwany tekst,aplikacja za³aduje do frames[2] adres URL z pytaniem – wraz z zacytowan¹postaci¹ zapytania u¿ytkownika
[ Pobierz całość w formacie PDF ]