АБРАКАДАБРА (Тоже самое но в читаемом виде)
Effekt, kotoriy mi sey4as rassmotrim, avlaetsa, pojaluy, samim rasprostranennim. I zaklu4aetsa on v smene izobrajenia pri navedenii na nego mi6koy. 4asto mojno sli6at' angliyskoe nazvanie effekta - RollOver, 4to obi4no perevodat kak "perekativanie". Mne ne kajetsa eto nazvanie uda4nim, no vse je, davayte pristupim.
Effekt mojet vstre4at'sa v razli4nix variantax, samie rasprostranennie iz kotorix eto:
- podsve4ivanie punktov menu
- begau6iy ukazatel'
- smenau6aasa kartinka
Nesmotra na vne6ne razli4noe proavlenie etix effektov, vse oni realizovani sxojim obrazom i otli4autsa li6' v melo4ax. Davayte, po poradku razberem kajdiy iz etix variantov.
Podsve4ivanie punktov menu
Naibolee 4asto vstre4au6aasa realizacia effekta RollOver. Ego osnovoy avlaetsa podmena kartinki pri navedenii kursora mi6ki i vozvrat k pervona4al'noy posle togo, kak mi6ka ee pokinet. Danniy effekt v deystvii mojno posmotret' vot na etom sayte.
Dla na4ala, nam budet neobxodimo narisovat' kajduu knopku menu v dvux variantax: v "otjatom" i "najatom" sostoaniax. Budem s4itat', 4to eto uje sdelano i pereydem k rassmotreniu mexanizma, kotoriy obespe4ivaet nujnuu nam funkcional'nost'.
Na4nem s napisania HTML-koda menu. Eto neslojno i budet vigladet' primerno tak: <a href=""><img src="pic/pic-1.gif" name="pic1"></a><br>
<a href=""><img src="pic/pic-2.gif" name="pic2"></a><br>
<a href=""><img src="pic/pic-3.gif" name="pic3"></a>
Eto obi4noe menu, sostavlennoe iz grafi4eskix elementov. A opustil nesu6estvennie dla ponimania detali - takie kak ukazanie visoti i 6irini izobrajenia, teg ALT i t.p. Zamet'te, odnako, 4to dla kajdoy kartinki ukazan atribut name, kotoriy ponadobitsa dla ssilki na kartinku.
Teper' mi nemnogo modificiruem menu, dobaviv v nego vizov funkciy smeni izobrajenia. Dla otslejivania popadania kursora mi6ki na izobrajenie mi vospol'zuemsa sobitiem onMouseOver i privajem k nemu vizov funkcii smeni izobrajenia: onMouseOver="change('pic1','pic/pic-1-on.gif');"
A dla otslejivania uxoda kursora s izobrajenia, na pomo6' pridet sobitie onMouseOut kotoroe takje vizivaet funkciu smeni izobrajenia, no uje s drugimi parametrami: onMouseOut="change('pic1','pic/pic-1.gif');"
V pervom slu4ae mi ukazivaem ssilku na izobrajenie "najatoy knopki", a vo vtorom, sootvetstvenno, "otjatoy" (ili isxodnoy kartinki, 4to sut' odno i toje).
Teper' napi6em vsu konstrukciu polnost'u na primere odnogo punkta menu: <a href="page.htm" onMouseOver="change('pic1','pic/pic-1-on.gif');"
onMouseOut="change('pic1','pic/pic-1.gif');"><img
src="pic/pic-1.gif" name="pic1"></a>
Podobnim obrazom neobxodimo obrabotat' kajdiy punkt na6ego menu. Otli4ie budet zaklu4at'sa li6' v smene zna4enia atributa name, kotoriy dla kajdogo punkta doljen bit' unikal'nim i sootvetstvuu6ey korrekcii zna4eniy parametrov v vizovax funkciy onMouseOver i onMouseOut.
Pered tem, kak pereyti k napisaniu koda, pogovorim o tom, kakim obrazom mi mojem upravlat' izobrajeniami na strani4ke.
Kak a pisal v odnoy iz bolee rannix statey, brouzer pered pokazom strani4ki na ekrane, razbivaet ee na sostavlau6ie bloki i zanosit ix v svou bazu dannix, predostavlaa nam dostup k informacii posredstvom ob&ektnoy modeli. V 4astnosti, vse kartinki soxranautsa v ob&ekte images, kotoriy, v svou o4ered', vxodit v ob&ekt document. I, naprimer, dla togo, 4tobi zamenit' odno izobrajenie drugim, nam dostato4no vospol'zovat'sa sleduu6ey konstrukciey: document.images["pic1"].src = "pic/pic-1-on.gif";
Obratite vnimanie, 4to dla ssilki na konkretnoe izobrajenie (ved' na strani4ke ix mojet bit' mnogo), mi ispol'zuem ima kartinki, kotoroe ukazali v atribute name tega <img>. V dannom primere, mi izmenili izobrajenie obi4noy knopki, na ee "najatiy" variant.
To4no takim je obrazom, mi mojem obratit'sa i k drugim atributam kartinki: 6irine (width), visote (heigth), poasnau6emu tekstu (alt) i t.d. V na6em je slu4ae dostato4no budet izmenit' tol'ko ssilku na kartinku, t.k. izobrajenia "obi4noy" i "najatoy" knopki imeut odinakovie razmeri.
Vse neobxodimie znania dla napisania funkcii u nas uje est', tak 4to pristupim. Vot kod na JavaScript, kotoriy osu6estvlaet podmenu izobrajeniy. V ka4estve parametrov mi peredaem emu ima risunka i ssilku na izobrajenie "najatoy" (ili "otjatoy") knopki: function change(img, ref) {
if (browser_ok == 'true') {
document.images[img].src = ref;
}
}
O sposobe opredelenia tipa i versii brouzera, podrobno napisano v pervoy stat'e cikla o JavaScript.
Begau6iy ukazatel'
4em otli4autsa varianti RollOver s "podsve4ivaniem punktov menu" i "begau6im ukazatelem"? Tol'ko tem, 4to vo vtorom slu4ae u nas est' vsego dve kartinki, ispol'zuemie dla vsex punktov menu - pustaa i s izobrajeniem ukazatela. Primer ispol'zovania dannogo effekta, mojno posmotret' vot zdes'
V etom variante RollOver nam pridetsa slegka izmenit' HTML-kod, opisivau6iy menu, t.k. pered kajdim punktom menu mi dobavlaem izobrajenie pustogo ukazatela: <img src="pic/pointer.gif" name="pic1"><a
href="news.htm" onmouseover="over('pic1');"
onmouseout="out('pic1');"><img src="pic/pic-1.gif"></a>
Obratite vnimanie na neskol'ko osobennostey. Vo-pervix, vmesto odnoy funkcii smeni izobrajenia nam ponadobatsa dve, t.k. deystvia, proizvodimie pri popadanii kursora v oblast' punkta menu, i pokidanii ee slegka otli4autsa. Mi nazovem eti funkcii sootvetstvenno over() i out(). Vo-vtorix, zamet'te, 4to atribut name, tega <img>, peremestilsa iz opisania punkta menu v opisanie ukazatela - ved' teper' mi podsve4ivaem ne menu, a ukazatel'!
4islo parametrov, peredavaemix funkciam mojno sokratit' - dostato4no ograni4it'sa imenem kartinki (atribut name), t.k. ssilki na izobrajenia, formiruu6ie ukazatel', nam izvestni zaranee. Kod, osu6estvlau6iy neobxodimie deystvia, teper' vigladit tak: function over(img) {
if (browser_ok == 'true') {
document.images[img].src = "pic/pointer-on.gif";
}
}
function out(img) {
if (browser_ok == 'true') {
document.images[img].src = "pic/pointer.gif";
}
}
Ostalos' razobrat'sa s otli4iami, kotorie prisu6i tret'emu variantu effekta, a imenno...
Smenau6aasa kartinka
Primer ispol'zovania dannogo effekta mojno nabludat' neposredstvenno na moem sobstvennom sayte.
Ego otli4ie, ot ranee rassmotrennix variantov, zaklu4aetsa v tom, 4to ispol'zuetsa vsego odna kartinka, kotoruu mi izmenaem, no variantov zameni bol'6e 4em dva. Neobxodimo tak je otmetit', 4to skript mojet vizivat'sa iz odnoy 4asti strani4ki, a smena kartinki proisxodit' sover6enno v drugoy.
Kak i v predidu6em slu4ae, na4nem s korrektirovki HTML-koda. V dannom variante on budet sostoat' iz dvux fragmentov: opisanie izobrajenia, kotoroe budet menat'sa i opisanie oblastey, pri popadanii na kotorie vizivaetsa skript. Eto mojet bit', k primeru, to je samoe menu: <img src="pic/default.gif" name="pic">
...
<a href="page_1.htm" onmouseover="over('pic/image-1.gif');"
onmouseout="out();"><img src="pic/pic-1.gif"></a><br>
<a href="page_2.htm" onmouseover="over('pic/image-2.gif');"
onmouseout="out();"><img src="pic/pic-2.gif"></a><br>
<a href="page_3.htm" onmouseover="over('pic/image-3.gif');"
onmouseout="out();"><img src="pic/pic-3.gif"></a>
Sootvetstvenno, pridetsa skorrektirovat' i povedenie funkciy. V funkciu over(), kotoraa vizivaetsa v rezul'tate popadania kursora v aktivnuu oblast', dostato4no peredat' tol'ko ssilku na zamenau6ee izobrajenie. Vizov je funkcii out() osu6estvlaetsa i vovse bez parametrov: function over(ref) {
if (browser_ok == 'true') {
document.images[img].src = ref;
}
}
function out() {
if (browser_ok == 'true') {
document.images[img].src = "pic/default.gif";
}
}
Vot mi i razobralis' so vsemi variantami skriptov, dla realizacii effekta RollOver. No, podojdite e6e nemnojko, t.k. ostalos' rassmotret' e6e odin o4en' vajniy vopros:
Predvaritel'naa zagruzka izobrajeniy
A special'no videlil etot moment v otdel'niy podrazdel, t.k. on o4en' vajen i sil'no skazivaetsa na ka4estve effekta i vizual'noy zagruzke strani4ki.
Dla 4ego ispol'zuetsa predvaritel'naa zagruzka izobrajeniy? Otvet lejit v samom mexanizme raboti internet - kak izvestno, lubaa strani4ka sostoit iz nabora faylov, kotorie zagrujautsa odnovremenno s osnovnoy strani4koy. No est' odna osobennost' - zagrujautsa tol'ko kartinki, kotorie vidni na ekrane. Na6 je effekt postroen na podmene izobrajeniy i sootvetstvenno 4ast' kartinok pri zagruzke ne vidna.
Predvaritel'naa zagruzka zaklu4aetsa v tom, 4to mi zaranee ska4ivaem nevidimie kartinki v ke6 komp'utera. Esli predzagruzka ne ispol'zuetsa, to pri smene kartinki budet proisxodit' zametnaa zaderjka - svazannaa s tem, 4to kartinka budet zagrujat'sa neposredstvenno s servera.
Mexanizm predvaritel'noy zagruzki izobrajeniy osu6estvlaetsa pri pomo6i sleduu6ego fragmenta koda: if (browser_ok == 'true') {
a1=new Image; a1.src="pic/pic-1-on.gif";
a2=new Image; a2.src="pic/pic-2-on.gif";
a3=new Image; a3.src="pic/pic-3-on.gif";
}
Mi prosto sozdaem ob&ekt Image dla kajdoy nevidimoy v danniy moment kartinki i ukazivaem adres izobrajenia. Eto privodit k tomu, 4to, doyda do etogo fragmenta koda, brouzer iniciiruet zagruzku izobrajeniy to4no tak je, kak i dla obi4nix vidimix kartinok. K koncu zagruzki strani4ki, absolutno vse kartinki ee sostavlau6ie naxodatsa v ke6e, i ot etogo budut zagrujat'sa mgnovenno.
Privedennim vi6e sposobom, neobxodimo ske6irovat' vse nevidimie na strani4ke kartinki. Obratite tak je vnimanie, 4to a osu6estvlau proverku korrektnosti brouzera i, v slu4ae, esli eto dostato4no staraa versia, kotoraa ne podderjivaet smenu izobrajeniy, to li6naa grafika prosto ne gruzitsa - tem samim neskol'ko uskoraa zagruzku strani4ki.
Pri gramotnoy narezke strani4ek sayta, mi mojem ispol'zovat' 4ast' izobrajeniy pervoy stranici vo vnutrennix. Podobniy mexanizm realizovan na moem sobstvennom sayte (www.cherry-design.spb.ru). Esli Vi k nemu vnimatel'no prismotrites', to obnarujite, 4to po4ti vsa neobxodimaa grafika gruzitsa na pervoy strani4ke i otkritie vnutrennix razdelov sayta proisxodit po4ti mgnovenno. V 4astnosti, okazivautsa uje zagrujennimi fragmenti logotipa raznix cvetov i grafika sostavlau6aa punkti menu.
Nadeus', 4to privedennie vi6e skripti i opisanie mexanizma ix raboti, pokajutsa Vam poleznimi, i, ispol'zua ix, Vi smojete realizovat' svoi zadumki.
Arxiv s primerami skriptov, rassmotrennix v dannoy stat'e, mojno vzat' otsuda.
citforum.ru/internet/webd/article_29.shtml#1
Mike Melnikov (cherry-design@mail.ru) Web-studio "Cherry-Design" |