Egy átfedő kép egy olyan kép, amely más képre változik, amikor Ön vagy ügyfele az egérrel fölfelé görget. Ezeket általában olyan interaktív érzelmek létrehozására használják, mint a gombok vagy a fülek. De bárhogyan is készíthetek átcsúsztatható képeket.
Ez a bemutató célja, hogy segítsen létrehozni a Rollover képet a Dreamweaverben . A Dreamweaver következő verzióit használók számára készült:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
A jelen útmutató követelményei
- Dreamweaver
A fent felsorolt verziók egyike. - Egy eredeti kép
Győződjön meg róla, hogy optimalizálja ezt a képet. Ez segít az oldalainak gyorsabb betöltésében. - A borító kép
Ennek a képnek ugyanolyan méretűnek kell lennie, mint az eredeti kép. Az eredeti képhez hasonlóan optimalizálni kell az oldal betöltési idejét. - Egy weboldal
Ez a HTML-oldal, ahol feltölti a képet.
01/06
Fogj neki
- Indítsa el a Dreamweaveret
- Nyissa meg azt a weboldalt, ahová át szeretné tölteni
02. 06. sz
Helyezzen be egy Rollover Image Image objektumot
A Dreamweaver megkönnyíti a forgatható kép létrehozását.
- Lépjen a Beszúrás menüre és lefelé a "Képobjektumok" almenübe.
- Válassza az "Image rollover" vagy a "Rollover image"
A Dreamweaver néhány régebbi verziója helyett az "Interaktív képek" nevű képobjektumokat hívja.
03/06
Mondja el a Dreamweaver-nek, hogy milyen képek használhatók
A Dreamweaver megjelenít egy párbeszédablakot a mezőkkel, amelyeket be kell töltenie, hogy létrehozhassa a borítékképet.
A kép neve
Válassza ki az oldalhoz egyedi képnevet. Egy szónak kell lennie, de számokat, aláhúzásokat (_) és kötőjeleket (-) használhat. Ezt fogja használni a megváltoztatni kívánt kép azonosítására.
Eredeti kép
Ez az oldal URL-je vagy helyszíne. Ebben a mezőben relatív vagy abszolút URL-címeket használhat. Ez legyen olyan kép, amely létezik a webszerveren, vagy amelyet feltöltesz az oldalon.
Átkapcsoló kép
Ez a kép, amely akkor jelenik meg, ha az egeret a kép felett. Az eredeti képhez hasonlóan ez lehet abszolút vagy relatív útvonal a képhez, és léteznie kell, vagy fel kell tölteni az oldal feltöltésekor.
Előtöltés átkapcsoló kép
Ez az opció alapértelmezés szerint be van állítva, mivel elősegíti a gyorsabb megjelenítés megjelenését. Az átfutási kép előtöltöttségének kiválasztásával a webböngésző tárolja azt egy gyorsítótárban, amíg az egér fel nem gördül.
Alternatív szöveg
A jó alternatív szöveg megkönnyíti a képeket. Minden kép hozzáadásakor mindig használjon valamilyen alternatív szöveget.
Ha rákattintott, kattintson az URL-re
A legtöbb ember rákattint egy képre, ha lát egy oldalt. Tehát meg kell szokni, hogy kattinthatóvá tegyék őket. Ezzel az opcióval megadhatja azt a lapot vagy URL-t, amellyel a néző megtekintheti a képet. De ez a lehetőség nem szükséges egy átforgatás létrehozásához.
Ha befejezte az összes mezőt, kattintson az OK gombra a Dreamweaver létrehozásához.
A következő oldalon megjelenik a Dreamweaver által írt szkript.
04/06
Dreamweaver írja a JavaScriptet az Ön számára
Ha kinyitja az oldalt a kódnézetben, látni fogod, hogy a Dreamweaver egy JavaScript blokkot helyez a HTML dokumentum
-jébe. Ez a blokk magában foglalja a 3 funkciót, amire szükség van a képek kicserélésére, ha az egér felcsévél, és az előtöltés funkciót, ha ezt választotta.függvény MM_swapImgRestore ()
függvény MM_findObj (n, d)
függvény MM_swapImage ()
függvény MM_preloadImages ()
05/06
Dreamweaver Hozzáadja a Rollover-nek a HTML-kódját
Ha úgy döntöttél, hogy a Dreamweaver előtörölné az átfedő képeket, akkor a dokumentum testén lévő HTML kóddal látja a preload parancsfájlt, így a képek gyorsabban töltődnek be.
onload = "MM_preloadImages ( 'shasta2.jpg')"
A Dreamweaver a kód összes kódját is hozzáadja, és összekapcsolja (ha tartalmaz egy URL-t). A borítékot hozzáadjuk a horgonycímkéhez, mint on-mouseover és onmouseout attribútumok.
onMouseOut = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"
06, 06
Teszteld ki a Rollover
Tekintse meg a teljesen működőképes képeket, és megtudja, mi van a Shasta gondolatain.