Átfordított kép létrehozása a Dreamweaver CS3-ban

A Dreamweaverben a görgetőképes képeket – ahogy a neve is sugallja – úgy tervezték, hogy reagáljanak, ha valaki egy kép fölé viszi a kurzort. A hatás lehet olyan drámai, mint egy kutyát ábrázoló kép, amelyet egy oroszlán kép vált fel, vagy olyan finom, mint egy szó színe megváltozik, amikor egyik kép felváltja a másikat. Akárhogy is, a Dreamweaver tartalmaz egy speciális párbeszédpanelt az átgörgetésekhez, amely az egyik legegyszerűbben alkalmazható eljárássá teszi az egyszerű görgetési effektus létrehozását.

Ha átverési képet szeretne létrehozni a Dreamweaver Képátgörgetés beszúrása párbeszédpanelével, kövesse az alábbi lépéseket:

1. Kattintson ide, hogy a kurzort arra az oldalra helyezze, ahol meg szeretné jeleníteni a kurzort.

Az átgörgetési effektusoknak legalább két képre van szükségük: egy a kezdeti állapothoz és egy az átgörgetési állapothoz. Használhat két különböző képet vagy két hasonlót, de mindkettőnek azonos méretűnek kell lennie. Ellenkező esetben furcsa méretezési effektusokat kap, mivel mindkét képet pontosan ugyanazon a helyen kell megjeleníteni az oldalon.

2. Válassza a Beszúrás –> Képobjektumok –> Áthelyezett kép menüpontot.

Megjelenik az Insert Rollover Image párbeszédpanel.

3. A Kép neve mezőben adja meg a kép nevét.

Mielőtt viselkedést alkalmazna egy elemre, például egy képre, az elemnek nevet kell adnia, hogy a viselkedési szkript hivatkozhasson rá. Bármit elnevezhet az elemeknek, amíg nem használ szóközöket vagy speciális karaktereket.

4. Az Eredeti kép mezőben adja meg az első látható képet. A Tallózás gombbal keresse meg és válassza ki a képet.

Ha a képek még nincsenek a webhely gyökérmappájában, a Dreamweaver átmásolja őket a webhelyére, amikor létrehozza az átgörgetést.

5. Az Áthelyezett kép mezőbe írja be azt a képet, amelyet láthatóvá szeretne tenni, amikor a látogatók az első kép fölé mozgatják a kurzort.

Ismét használhatja a Tallózás gombot a kép megkereséséhez és kiválasztásához.

6. Jelölje be az Átgörgetési kép előtöltése jelölőnégyzetet, ha az oldal első betöltésekor az összes átgörgetési képet a böngésző gyorsítótárába szeretné betölteni.

Ha nem választja ezt a lépést, a látogatók késést tapasztalhatnak, mivel a második kép nem töltődik le, amíg az egeret az eredeti kép fölé nem viszi.

7. A Ha rákattint, Ugrás az URL-re mezőben írjon be egy webcímet, vagy tallózással keressen meg egy másik oldalt a webhelyen, amelyre hivatkozni szeretne.

Ha nem ad meg URL-t, a Dreamweaver automatikusan beszúrja a # jelet helyőrzőként.

8. Kattintson az OK gombra.

A képek automatikusan átgörgetésként vannak beállítva.

9. Kattintson a munkaterület tetején található földgömb ikonra a munka előnézetének megtekintéséhez a böngészőben, és tesztelje az átgörgetés működését.