E Rollover Image ass e Bild, deen an engem anere Bild geännert gëtt wann Dir oder Äre Client d'Maus iwwerholl huet. Dës ginn normalerweis benotzt fir e interaktiven Gefühl wéi Buttelen oder Tabs ze kreéieren. Mee Dir kënnt Biller iwwerlooss aus just eppes maachen.
Dës Tutorial ass entwéckelt fir Iech ze hëllefen eng Rollover Image zu Dreamweaver z'erreechen . Et ass fir Leit benotzt déi benotzt mat folgenden Versioune vun Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Viraussetzungen fir dës Tutorial
- Dreamweaver
Een vun den uewe genannt Versiounen. - Eng originell Biller
Vergewëssert Iech Äert Bild. Dëst hëlleft Är Säiten méi schnell. - D'Rollover Image
Dëse Bild sollt déi selwecht Dimensioune si wéi d'Originalbild. A wéi den ursprénglechen image sollt optimistesch gemaach ginn fir Säiten ze liesen. - Eng Websäit
Dëst ass d'HTML Säit wou Dir Är Ufroën ofzestëmmen.
01 vum 06
Ufänken
- Start Dreamweaver
- Opmaache vun der Websäit wou Dir wëllt Är Rollover
02 vum 06
Setzt e Rollover Image Image Objekt
Dreamweaver mécht et ganz einfach fir en Iwwerbléck ze bauen.
- Gitt op d'Menüskaart a rof an d'Ënnersich "Image Objects".
- Wielt "Image Rollover" oder "Rollover Image"
E puer méi al Versioune vun Dreamweaver ruffen d'Image Objekte "Interactive Images" un.
03 vum 06
Tell Dreamweaver Wat Biller benotzen
Dreamweaver pops een Dialogfeld mat de Felder déi Dir braucht fir de Formulaire ze maachen.
Image Numm
Kuckt een Image Numm deen eenzegaarteg ass fir d'Säit. Et sollt all Wuert sinn, awer Dir kënnt Zuelen benotzen, Ënnerscores (_) an Bindestrëften (-). Dëst gëtt benotzt fir d'Bild ze changéieren.
Originalbild
Dëst ass d'URL oder de Standort vum Bild, deen op der Säit ufänkt. Dir kënnt relativ oder absolut URLen an dësem Feld benotzen. Dëst sollt ee Bild sinn, deen op Ärem Webservateur existéiert oder datt Dir op dëser Säit eropluet.
Rollover Image
Dëst ass d'Bild dat erspuert wann Dir eng Maus iwwer d'Bild kënnt. Just wéi de urspréngleche Bild ass dat e absoluten oder relativen Wee fir d'Bild, an et soll existéiert oder eropgeluede ginn wann Dir déi Säit eropluede kënnt.
Preload Rollover Image
Dës Säit gëtt gewielt default, well et hëlleft de Rollover méi séier. Wann Dir de Rolloverbild uginn, wäerte de Webbrowser an engem Cache gespäichert ginn, bis d'Maus iwwerdréit.
Alternativen Text sinn
Gitt alternativ Text mécht Är Biller méi zougänglech. Dir sollt ëmmer e puer alternativen Text benotzen wann Dir Biller huet.
Wéi klickt, gitt op URL
Déi meescht Leit klickt op eng Bild wou se se op enger Säit gesinn. Also sollt Dir an der Gewunnecht sinn datt se klickbar sinn. Dës Optioun erlaabt Dir d'Säit oder d'URL fir de Betrachter ze markéieren wann se klickt op d'Bild. Awer dës Optioun ass net erfuerderlech fir en Iwwerleeën ze kreéieren.
Wann Dir all d'Felder ofgeschloss ass, klickt op OK fir Dreamweaver ze maachen fir Är Rollover Bild.
Déi nächst Säit weist de Skript dat Dreamweaver schreift.
04 vun 06
Dreamweaver Schreift Dir de JavaScript fir Iech
Wann Dir d'Säit an der Code View opklappt, gesitt Dir datt Dreamweaver e Block vun JavaScript an de
vun Ärem HTML Dokument setzt. Dëse Block beinhalt déi 3 Funktiounen, déi Dir braucht fir d'Biller z'änneren ze maachen wann d'Maus iwwer d'Wierder hellt an de Preload Funktion, wann Dir decidéiert hutt.Funktioun MM_swapImgRestore ()
Funktioun MM_findObj (n, d)
Funktioun MM_swapImage ()
Funktioun MM_preloadImages ()
05 vum 06
Dreamweaver fëllt den HTML fir de Rollover
Wann Dir gewielt hutt Dreamweaver virzelueden den Iwwerleeën Biller, da gesitt Dir den HTML Code am Kierper vun Ärem Dokument fir de Preload Skript ze ruffen, fir datt Är Biller méi séier liesen.
Onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver fiert och all den Code fir Äert Bild an verlinkt et (wann Dir eng URL enthält). De Rollover-Deel gëtt op d'Verankerungsbeispill as als onmouseover a onmouseout Attributer agefouert.
Onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 vum 06
Test de Rollover
Kuckt d'voll funkbaart Rollover Image a léiere wat et op Shasta's Gedanken ass.