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
- DreamweaverA fent felsorolt verziók egyike.
- Egy eredeti képGyő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épEnnek 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 weboldalEz a HTML-oldal, ahol feltölti a képet.
Fogj neki
- Indítsa el a Dreamweaveret
- Nyissa meg azt a weboldalt, ahová át szeretné tölteni
Helyezzen át egy átfordítható kép objektumot
A Dreamweaver megkönnyíti a forgatható kép létrehozását.
- Lépjen a Beszúrás menüre és le a Kép objektumok almenü.
- választ Képfelhúzás vagy Rollover kép.
A Dreamweaver néhány régebbi verziója helyett az "Interaktív képek" nevű képobjektumokat hívja.
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.
Amikor kattintott, ugorjon az URL-be
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 a gombra rendben hogy a Dreamweaver létrehozza a borító képét.
Dreamweaver írja a JavaScriptet az Ön számára
Ha kinyitod az oldalt a kódnézetben, látni fogod, hogy a Dreamweaver egy JavaScript-blokkot helyez be a
a HTML dokumentumban. 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 () 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)" Tekintse meg a teljesen működőképes képeket, és megtudja, mi van Shasta elméjében. Dreamweaver Hozzáadja a Rollover-nek a HTML-kódját
Teszteld ki a Rollover
