Kuidas luua Dreamweaveris mitme pildiga vahetustehinguid

Enne kui alustate Dreamweaveri funktsiooni Swap Image käitumisega keerukama lehekujunduse loomist, vaadake valmis lehte. Kujutise vahetamise käitumisega saate asendada kõik või kõik lehel olevad pildid.

Kui kasutate funktsiooni Vaheta pilt, on oluline, et kõik vahetatavad pildid oleksid ühesuurused (kõrgus ja laius). Kui pildid ei ole ühesuurused, venitatakse või tihendatakse kõiki pilte, välja arvatud esimene, nii, et need mahuksid ruumi, mille võtab esimene lehele sisestatud pilt.

Kui kasutate pildi vahetamise käitumist piltide seeriaga, mis ei ole kõik ühekõrgused ja laiused, on teil mitu võimalust.

Kärbi suuremaid pilte nii, et kõik pildid oleksid ühesuurused.

Kombineerides iga horisontaalse kujutise jaoks kaks vertikaalset pilti, võtaksid horisontaalsed ja vertikaalsed kujutised teie kujunduses sama ruumi. Lihtsalt looge mõnes programmis (nt Photoshop) fail, sisestage samasse faili kõrvuti kaks vertikaalset pilti ja seejärel määrake selle pildi suurus nii, et fail oleks ühe horisontaalse pildiga sama suur.

Looge üks pildifail oma suurima pildi suuruses, määrake taustaks neutraalne värv (nt must või valge) ja seejärel sisestage kõik teised pildid taustale, et saaksite need kõik sama failisuurusega salvestada.

Pildi vahetamise käitumise kasutamiseks järgige neid samme.

1 Looge lehe kujundus kõigi piltidega, mida soovite algselt kuvada.

Kõigil kolmel Londoni Tower Bridge'i lehekujunduses oleval fotol on kaks koopiat: üks pisipilt ja üks suurem versioon. Lehe esmakordsel laadimisel veebibrauseris asetatakse kõik kolm pisipilti lehe allossa, kusjuures esimene vastavatest suurematest versioonidest kuvatakse põhialal vahetult pisipiltide kohal.

2 Pange oma piltidele nimi kinnisvarainspektoris.

Piltide sihtimiseks JavaScriptiga, mis toimibki, andke esmalt igale pildile kordumatu ID. Pildi ID ei ole sama, mis pildi failinimi või tekstimärgend, kuigi võite kasutada samu või sarnaseid nimesid. Pildi ID-des ei tohi olla tühikuid ega erimärke.

3Valige Aken → Käitumine.

Avaneb paneel Käitumised. Saate lohistada käitumispaneeli mujale lehel ja saate seda laiendada, lohistades selle alaosa või külge. Samuti võite soovida sulgeda kõik muud avatud paneelid, et ruumi teha, klõpsates mis tahes paneeli ülaosas tumehalli riba.

4 Valige pilt.

Valige lehel pilt, mis toimib toimingu käivitajana.

5Valige pildi vahetamise käitumine.

Kui tööalal on valitud päästikupilt, klõpsake paneelil Käitumised plussmärki, et avada toimingute ripploend, ja valige toiming, mida soovite rakendada.

6 Määrake vahetatavad pildid dialoogiboksis Swap Image.

Valige loendis Pildid asendatava pildi ID. Põhipilti asendava pildi valimiseks klõpsake nuppu Sirvi. Kui pilt pole veel kohalikku saidi kausta salvestatud, pakub Dreamweaver selle teie jaoks sinna kopeerimist.

7 Valige dialoogiboksi Kujutise vahetamine allservas suvand Piltide eellaadimine, et anda brauserile korraldus laadida lehe laadimisel kõik pildid vahemällu.

Kui te seda valikut ei vali, võib pildivahetuse kasutamisel tekkida viivitus.

8Kui soovite, tühistage valik Taasta pildid OnMouseOut.

Suvand Restore Images OnMouseOut tähendab, et kui sündmus on lõpule viidud (nt kui hiir liigutatakse käivitavalt pisipildilt), asendatakse algne pilt. Vaikimisi valib Dreamweaver selle valiku pildi vahetamise käitumise jaoks. Võib-olla soovite selle valiku tühistada, kui leiate, et originaalkujutise asendamine iga kord, kui liigute kursori üle mõne muu pisipildi, häirib tähelepanu.

9Pärast käitumise kõigi sätete määramist klõpsake nuppu OK.

Uus käitumine kuvatakse paneelil Käitumised.

10 Määrake käitumise sündmus.

Pärast toimingu rakendamist saate tagasi minna ja määrata, milline sündmus toimingu käivitab. Vaikimisi rakendab Dreamweaver sündmust OnMouseOver, kui kasutate toimingut Swap Image, kuid saate selle sündmuse muuta mis tahes saadaolevaks sündmuseks, näiteks OnClick, mis nõuab, et kasutaja pildi vahetamise käivitamiseks klõpsaks pildil.

11 Rakendage täiendavaid käitumisviise.

Pildi vahetamise käitumise rakendamiseks lehe teistele piltidele korrake samme 5–10, klõpsates valides pildi, mida soovite käivitada, ja seejärel määrates vastava pildi, mida tuleks vahetada.

12 Testige oma tööd brauseris.

Sellise käitumise mõjusid ei saa näha enne, kui klõpsate Dreamweaveri tööruumi vasakus ülanurgas nuppu Otsevaade või vaatate oma lehe eelvaadet veebibrauseris.