Kako stvoriti zamjene s više slika u Dreamweaveru

Prije nego počnete stvarati složeniji dizajn stranice s Dreamweaverovim ponašanjem Swap Image, pogledajte gotovu stranicu. Uz ponašanje Zamijeni sliku, možete zamijeniti bilo koju ili sve slike na stranici.

Kada koristite ponašanje Swap Image, važno je da sve slike koje ćete mijenjati budu iste veličine (visine i širine). Ako slike nisu iste veličine, sve slike osim prve bit će rastegnute ili komprimirane kako bi se uklopile u prostor koji zauzima prva slika umetnuta na stranicu.

Ako koristite ponašanje Zamijeni sliku s nizom slika koje nisu iste visine i širine, imate nekoliko opcija:

Izrežite veće kako bi sve slike bile iste veličine.

Učinite da vodoravne i okomite slike zauzmu isti prostor u vašem dizajnu kombinirajući dvije okomite slike za svaku vodoravnu. Jednostavno stvorite datoteku u programu kao što je Photoshop, umetnite dvije okomite slike u istu datoteku jednu do druge, a zatim veličinu te slike tako da datoteka bude iste veličine kao jedna vodoravna slika.

Izradite jednu slikovnu datoteku veličine vaše najveće slike, postavite pozadinu na neutralnu boju, kao što je crna ili bijela, a zatim umetnite sve ostale slike u pozadinu tako da ih sve možete spremiti s istom veličinom datoteke.

Slijedite ove korake da biste koristili ponašanje Swap Image:

1Izradite dizajn stranice sa svim slikama koje želite da se u početku prikazuju.

Svaka od tri fotografije u dizajnu stranice za Tower Bridge u Londonu ima dvije kopije: jednu sličicu i jednu veću verziju. Kada se stranica prvi put učita u web-pregledniku, sve tri minijature nalaze se na dnu stranice, a prva od odgovarajućih većih verzija prikazana je u glavnom području neposredno iznad minijatura.

2 Imenujte svoje slike u Property Inspectoru.

Da biste svoje slike ciljali pomoću JavaScripta, što je način na koji funkcioniraju ponašanja, najprije svakoj slici dajte jedinstveni ID. ID slike nije isti kao naziv slikovne datoteke ili tekstualna oznaka, iako možete koristiti iste ili slične nazive. ID-ovi slika ne smiju sadržavati razmake ili bilo kakve posebne znakove.

3 Odaberite Prozor→ Ponašanje.

Otvara se ploča Ponašanja. Ploču Ponašanja možete povući drugdje na stranici, a možete je proširiti povlačenjem njezinog dna ili sa strane. Možda ćete htjeti zatvoriti sve druge otvorene ploče kako biste napravili više mjesta klikom na tamno sivu traku na vrhu bilo koje ploče.

4 Odaberite sliku.

Odaberite sliku na stranici koja će poslužiti kao okidač za radnju.

5Odaberite ponašanje Swap Image.

Uz odabranu sliku okidača u radnom prostoru, kliknite znak plus na ploči Ponašanja da biste otvorili padajući popis radnji i odaberite radnju koju želite primijeniti.

6 Odredite slike koje želite zamijeniti u dijaloškom okviru Zamijeni sliku.

Na popisu Slike odaberite ID za sliku koja će biti zamijenjena. Kliknite gumb Pregledaj za odabir slike koja zamjenjuje glavnu sliku. Ako slika već nije spremljena u mapu lokalne stranice, Dreamweaver će vam ponuditi da je tamo kopira.

7Na dnu dijaloškog okvira Zamijeni sliku odaberite opciju Prethodno učitaj slike da biste naložili pregledniku da učita sve slike u predmemoriju kada se stranica učita.

Ako ne odaberete ovu opciju, može doći do kašnjenja kada se koristi zamjena slika.

8Ako želite, poništite odabir opcije Restore Images OnMouseOut.

Opcija Restore Images OnMouseOut znači da kada se događaj završi (kao što je kada se miš pomakne sa minijature za pokretanje), originalna slika se zamjenjuje. Prema zadanim postavkama, Dreamweaver unaprijed odabire ovu opciju za ponašanje Swap Image. Možda ćete htjeti poništiti odabir ove opcije ako smatrate da zamjena izvorne slike svaki put kada pomaknete pokazivač preko druge minijature odvlači pažnju.

9Nakon što odredite sve postavke za ponašanje, kliknite U redu.

Novo ponašanje pojavljuje se na ploči Ponašanja.

10 Odredite događaj za ponašanje.

Nakon što se radnja primijeni, možete se vratiti i odrediti koji će događaj pokrenuti radnju. Prema zadanim postavkama, Dreamweaver primjenjuje događaj OnMouseOver kada koristite radnju Zamijeni sliku, ali taj događaj možete promijeniti u bilo koji dostupan, kao što je OnClick, koji zahtijeva da korisnik klikne sliku kako bi pokrenuo radnju Zamijeni sliku.

11 Primijenite dodatna ponašanja.

Da biste primijenili ponašanje Zamijeni sliku na druge slike na stranici, ponovite korake 5–10, klikom da odaberete sliku koju želite poslužiti kao okidač, a zatim odredite odgovarajuću sliku koju treba zamijeniti.

12 Testirajte svoj rad u pregledniku.

Ne možete vidjeti učinke ponašanja poput ovog dok ne kliknete gumb Live view u gornjem lijevom dijelu radnog prostora u Dreamweaveru ili ne pregledate svoju stranicu u web-pregledniku.