Vola bildo estas bildo, kiu ŝanĝas al iu alia bildo, kiam vi aŭ via kliento ruliĝas la muson super ĝi. Ĉi tiuj kutime kreas interagan senton kiel butonoj aŭ pestañas. Sed vi povas krei movajn bildojn el preskaŭ io ajn.
Ĉi tiu lernilo estas desegnita por helpi vin krei movan bildon en Dreamweaver . Ĝi estas celita por uzo de homoj uzante la sekvajn versiojn de Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Postuloj por ĉi tiu Tutorial
- Dreamweaver
Unu el la versioj listigitaj supre. - Originala bildo
Certigu optimumigi ĉi tiun bildon. Ĉi tio helpos viajn paĝojn ŝarĝi pli rapide. - La bildo de flugilo
Ĉi tiu bildo devus esti la samaj dimensioj kiel la originala bildo. Kaj, kiel la originala bildo, devus esti optimumigita por helpi paĝajn ŝarĝojn. - Retpaĝo
Ĉi tiu estas la paĝo de HTML kie vi metos vian bildon.
01 de 06
Komenciĝi
- Komencu Dreamweaver
- Malfermu la retpaĝon, kie vi volas vian movon
02 de 06
Enmetu Rollover Image Image Object
Dreamweaver faciligas krei etendan bildon.
- Iru al la Enmeta menuo kaj malsupren al la "Subjekto de bildoj".
- Elektu "Bildŝanĝilon" aŭ "Rollover-bildon"
Kelkaj pli malnovaj versioj de Dreamweaver nomas la Image Objects "Interactive Images" anstataŭe.
03 de 06
Diru Dreamweaver Kiujn Bildojn Uzu
Dreamweaver montras dialogan skatolon kun la kampoj, kiujn vi bezonas plenigi por krei vian moviĝantan bildon.
Bildo Nomo
Elektu bildan nomon kiu estas unika por la paĝo. Ĝi devus esti ĉiu unu vorto, sed vi povas uzi nombrojn, substaraĵojn (_) kaj hyphens (-). Ĉi tio estos uzata por identigi la bildon por ŝanĝi.
Originala Bildo
Jen la URL aŭ loko de la bildo, kiu komenciĝos sur la paĝo. Vi povas uzi relativajn aŭ absolvajn vojajn URLojn en ĉi tiu kampo. Ĉi tio devus esti bildo, kiu ekzistas en via servilo aŭ vi alŝutos per la paĝo.
Rollover Bildo
Jen la bildo, kiu aperos, kiam vi musos super la bildo. Same kiel la originala bildo, tio povas esti absoluta aŭ relativa vojo al la bildo, kaj ĝi devus ekzisti aŭ esti alŝutita kiam vi alŝutas la paĝon.
Antaŭŝarĝo Rollover Bildo
Ĉi tiu opcio estas elektita defaŭlte ĉar ĝi helpas la ruliĝilon aperi pli rapide. Elektante preŝargi la moviĝantan bildon, la Retumilo konservos ĝin en kaŝmemoro ĝis la muso ruliĝas super ĝi.
Alterna Teksto
Bona alterna teksto faras viajn bildojn pli alireblaj. Vi ĉiam devas uzi iun tipon de alternativa teksto, kiam vi aldonas bildojn.
Kiam Alklakita, Iru Al URL
Plej multaj homoj klakos bildon kiam ili vidas unu sur paĝo. Do vi devus esti kutime fari ilin klakeblaj. Ĉi tiu opcio permesas al vi specifi la paĝon aŭ URL por preni la spektanton kiam ili alklakas la bildon. Sed ĉi tiu opcio ne estas necesa por krei movon.
Kiam vi kompletigis ĉiujn kampojn, alklaku OK por havi Dreamweaver krei vian moviĝantan bildon.
La sekva paĝo montras la skripton, kiun Dreamweaver skribas.
04 de 06
Dreamweaver Skribas la JavaScript por Vi
Se vi malfermos la paĝon en kodo-vidado, vi vidos, ke Dreamweaver enmetas blokon de JavaScript en la
funkcio MM_swapImgRestore ()
funkcio MM_findObj (n, d)
funkcio MM_swapImage ()
funkcio MM_preloadImages ()
05 de 06
Dreamweaver Aldonas la HTML por la Rollover
Se vi elektas Dreamweaver antaŭŝargi la movajn bildojn, tiam vi vidos la HTML-kodon en la korpo de via dokumento por voki la antaŭŝarĝan skripton por ke viaj bildoj ŝarĝu pli rapide.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver ankaŭ aldonas la tutan kodon por via bildo kaj ligiloj (se vi inkluzivis URL). La etendita parto estas aldonita al la ankro etikedo kiel onmouseover kaj onmouseout atributoj.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Bildo1', '', 'shasta1.jpg', 1)"
06 de 06
Elprovi la Rollover
Vidu la plene funkcialan moviĝantan bildon kaj lernu, kio estas sur la menso de Shasta.