Dreamweaver – Swap-ovanje slika

Da bi vašoj web stranici dodali efekat swap-ovanja, tj. efekat zamene prve slike drugom kada se pokazivač miša nađe iznad prve slike, ne morate da poznajete JavaScript. Primenu ovog efekta prikazaćemo u aplikaciji Dreamweaver. Pre nego što počnemo, pripremite odgovarajuće grafičke elemente, tj. dve slike istih dimenzija i različitog sadržaja.

Pokrenite aplikaciju Dreamweaver i kreirajte novi dokument, „File -> New“. Na određeno mesto postavićemo naš prvi grafički element (sličica, dugmence) i to preko menija „Insert -> Image“. Pojaviće vam se dijalog prozor „Select Image Source“ gde će te preko navigacionih polja pronaći vašu sličicu na disku, u desnom oknu (Image Preview) videćete koja slika stoji iz određenog naziva fajla. Na kraju izaberite „OK“. Sada ćemo ovoj našoj slici dodati određeno „ponašanje“ (Behavior), tj. dodelićemo promenu prvoj sličici kada iznad nje pređe pokazivač miša.

Sa padajućeg menija izaberite „Window -> Behavior“, ili pritisnite F8, da bi ste dobili prozor „Behaviors“. Selektujte prvo koje verzije browser-a želite da pokrijete, pošto sve verzije ne podržavaju ovu opciju (izaberite 4.0 and Later browsers). Kliknite levo od ovog polja dugme „plus +“ i iz menija izaberite „Swap Image“. U sledećem dijalog prozoru kliknite dugme „Browse“ da bi pronašli drugu sliku na disku. Uverite se da su polja za potvrdu „Preload Image“ i „Restore Image on Mouse Out“, potvrđena i kliknite na „OK“. Na osnovu ovog podešavanja kada miš pređe iznad slike doćiće do zamene prve slike i kada miš napusti područje slike, vratiće se u prvobitno stanje. Snimite sada fajl sa „File -> Save As“ i pokrenite u browser-u da bi videli kako ovo izgleda (pritisnite prečicu F12). Ostaje samo da ovoj slici dodate link na neku drugu stranicu.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.