V Dreamweaverju so slike prevračanja – kot pove že ime – zasnovane tako, da se odzovejo, ko nekdo premakne kazalec nad sliko. Učinek je lahko tako dramatičen kot slika psa, ki ga zamenja slika leva, ali tako subtilen, kot se spreminja barva besede, ko ena slika zamenja drugo. Kakorkoli že, Dreamweaver vključuje posebno pogovorno okno za prevračanje, zaradi katerega je ustvarjanje preprostega učinka prevračanja eno najlažjih načinov vedenja.
Če želite ustvariti sliko prevračanja z uporabo Dreamweaverjevega pogovornega okna Insert Image Rollover, sledite tem korakom:
1. Kliknite, da postavite kazalec na stran, kjer želite, da se prikaže pomik.
Učinki prevračanja zahtevajo vsaj dve sliki: eno za začetno stanje in eno za stanje prevračanja. Uporabite lahko dve različni sliki ali dve podobni, vendar morata imeti obe enake dimenzije. V nasprotnem primeru dobite nekaj čudnih učinkov skaliranja, ker morata biti obe sliki prikazani v popolnoma istem prostoru na strani.
2. Izberite Vstavi –> Slikovni predmeti –> Preklopna slika.
Prikaže se pogovorno okno Insert Rollover Image.
3. V polju Ime slike poimenujte svojo sliko.
Preden lahko uporabite vedenje za element, kot je slika, mora imeti element ime, tako da se lahko skript obnašanja nanj sklicuje. Elemente lahko poimenujete karkoli želite, če ne uporabljate presledkov ali posebnih znakov.
4. V polju Originalna slika določite prvo sliko, ki jo želite videti. Uporabite gumb Prebrskaj, da poiščete in izberete sliko.
Če slike še niso v korenski mapi vašega spletnega mesta, jih bo Dreamweaver kopiral na vaše spletno mesto, ko ustvarite preklop.
5. V polje Rollover Image vnesite sliko, za katero želite, da postane vidna, ko obiskovalci premaknejo kazalec nad prvo sliko.
Ponovno lahko uporabite gumb Prebrskaj, da poiščete in izberete sliko.
6. Izberite potrditveno polje Preload Rollover Image, da naložite vse slike s preklopom v predpomnilnik brskalnika, ko se stran prvič naloži.
Če se tega koraka ne odločite, lahko vaši obiskovalci doživijo zamudo, ker druga slika ne bo prenesena, dokler se miška ne premakne čez prvotno sliko.
7. V polje Ko kliknete, Pojdi na URL, vnesite kateri koli spletni naslov ali prebrskajte, da poiščete drugo stran na vašem spletnem mestu, na katero želite vzpostaviti povezavo.
Če ne navedete URL-ja, Dreamweaver samodejno vstavi znak # kot ogrado.
8. Kliknite V redu.
Slike se samodejno nastavijo kot preklop.
9. Kliknite ikono globusa na vrhu delovnega prostora, da si ogledate svoje delo v brskalniku in preizkusite, kako deluje preklop.