www.romver.ru
/ Полный список статей / JavaScript, pic, gif, img, pic gif, src, меню, src pic, картинки, img src, изображения, pic1, onmouseout, href, будет, onmouseover, изображение, изображений, эффекта, document, images, document images, true, browser_ok true, browser_ok, странички, images img, true document, rollover, function

Как заказать сайт


АБРАКАДАБРА (Тоже самое но в читаемом виде)

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"
3
Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(98I) 7608865

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2024 romver.ru

Полная карта сайта Display Pagerank