Kako ustvariti zamenjave z več slikami v Dreamweaverju

Preden začnete ustvarjati bolj zapleteno zasnovo strani z Dreamweaverjevim vedenjem Swap Image, si oglejte končano stran. Z vedenjem Swap Image lahko zamenjate katero koli ali vse slike na strani.

Ko uporabljate vedenje Zamenjaj sliko, je pomembno, da vse slike, ki jih boste zamenjali, naredite enake velikosti (višine in širine). Če slike niso enake velikosti, bodo vse slike razen prve raztegnjene ali stisnjene, da se prilegajo prostoru, ki ga zaseda prva slika, vstavljena na stran.

Če uporabljate vedenje Swap Image z nizom slik, ki niso vse enake višine in širine, imate na voljo nekaj možnosti:

Obrežite večje, da bodo vse slike enake velikosti.

Naj vodoravne in navpične slike zavzamejo enak prostor v vašem dizajnu, tako da združite dve navpični sliki za vsako vodoravno. Preprosto ustvarite datoteko v programu, kot je Photoshop, vstavite dve navpični sliki v isto datoteko drug ob drugem in nato velikost te slike tako, da bo datoteka enake velikosti kot ena vodoravna slika.

Ustvarite eno slikovno datoteko velikosti vaše največje slike, nastavite ozadje na nevtralno barvo, na primer črno ali belo, nato pa v ozadje vstavite vse druge slike, tako da jih lahko shranite z enako velikostjo datoteke.

Sledite tem korakom, da uporabite obnašanje Swap Image:

1Ustvarite zasnovo strani z vsemi slikami, ki jih želite na začetku prikazati.

Vsaka od treh fotografij v oblikovanju strani za Tower Bridge v Londonu ima dve kopiji: eno sličico in eno večjo različico. Ko se stran prvič naloži v spletnem brskalniku, so vse tri sličice postavljene na dno strani, pri čemer je prva od ustreznih večjih različic prikazana v glavnem območju tik nad sličicami.

2 Poimenujte svoje slike v inšpektorju lastnine.

Če želite svoje slike ciljati z JavaScriptom, kar je način delovanja vedenja, najprej vsaki sliki dajte edinstven ID. ID slike ni enak imenu slikovne datoteke ali besedilni oznaki, čeprav lahko uporabite enaka ali podobna imena. ID-ji slik ne smejo vsebovati presledkov ali posebnih znakov.

3Izberite Okno→ Obnašanje.

Odpre se plošča Obnašanje. Ploščo Behaviors lahko povlečete drugam na strani in jo lahko razširite tako, da povlečete njeno dno ali stran. Morda boste želeli zapreti tudi vse druge odprte plošče, da naredite več prostora, tako da kliknete temno sivo vrstico na vrhu katere koli plošče.

4 Izberite sliko.

Izberite sliko na strani, ki bo služila kot sprožilec za dejanje.

5Izberite vedenje Swap Image.

Ko je v delovnem prostoru izbrana slika sprožilca, kliknite znak plus na plošči Vedenja, da odprete spustni seznam dejanj, in izberite dejanje, ki ga želite uporabiti.

6 V pogovornem oknu Zamenjaj sliko določite slike, ki jih želite zamenjati.

Na seznamu Slike izberite ID za sliko, ki bo zamenjana. Kliknite gumb Prebrskaj, da izberete sliko, ki nadomešča glavno sliko. Če slika še ni shranjena v lokalni mapi spletnega mesta, vam bo Dreamweaver ponudil, da jo tam kopirate.

7Na dnu pogovornega okna Zamenjaj sliko izberite možnost Prednaloži slike, da naročite brskalniku, naj naloži vse slike v predpomnilnik, ko se stran naloži.

Če te možnosti ne izberete, lahko pride do zamude pri uporabi zamenjave slike.

8Če želite, počistite možnost Restore Images OnMouseOut.

Možnost Restore Images OnMouseOut pomeni, da se po končanem dogodku (na primer, ko se miška premakne s sprožilne sličice), izvirna slika zamenja. Dreamweaver privzeto izbere to možnost za vedenje Swap Image. Morda boste želeli preklicati to možnost, če ugotovite, da je zamenjava izvirne slike vsakič, ko premaknete kazalec čez drugo sličico, moteča.

9Ko določite vse nastavitve za vedenje, kliknite V redu.

Novo vedenje se prikaže na plošči Behaviors.

10 Določite dogodek za vedenje.

Ko je dejanje uporabljeno, se lahko vrnete in določite, kateri dogodek bo sprožil dejanje. Dreamweaver privzeto uporabi dogodek OnMouseOver, ko uporabite dejanje Zamenjaj sliko, vendar lahko ta dogodek spremenite v katerega koli razpoložljivega, na primer OnClick, ki zahteva, da uporabnik klikne sliko, da sproži dejanje Zamenjaj sliko.

11 Uporabite dodatna vedenja.

Če želite uporabiti vedenje Zamenjaj sliko za druge slike na strani, ponovite korake 5–10, tako da kliknete, da izberete sliko, ki jo želite uporabiti kot sprožilec, in nato določite ustrezno sliko, ki jo je treba zamenjati.

12 Preizkusite svoje delo v brskalniku.

Učinkov vedenja, kot je to, ne morete videti, dokler ne kliknete gumba Pogled v živo v zgornjem levem kotu delovnega prostora v Dreamweaverju ali si ogledate svojo stran v spletnem brskalniku.