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 na www.krstarica.com