Delwedd symudol yw delwedd sy'n newid i ddelwedd arall pan fyddwch chi neu'ch cwsmer yn rholio'r llygoden droso. Defnyddir y rhain yn aml i greu teimlad rhyngweithiol megis botymau neu dabiau. Ond gallwch greu delweddau symudol o ddim ond rhywbeth.
Dyluniwyd y tiwtorial hwn i'ch helpu i greu delwedd symudol yn Dreamweaver . Fe'i bwriedir i'w ddefnyddio gan bobl sy'n defnyddio'r fersiynau canlynol o Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- CS3 Dreamweaver
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Gofynion ar gyfer y Tiwtorial hwn
- Dreamweaver
Un o'r fersiynau a restrir uchod. - Delwedd wreiddiol
Gwnewch yn siŵr eich bod yn gwneud y gorau o'r ddelwedd hon. Bydd hyn yn helpu eich tudalennau i lwytho'n gyflymach. - Y ddelwedd symudol
Dylai'r ddelwedd hon fod yr un dimensiynau â'r delwedd wreiddiol. Ac, fel y delwedd wreiddiol, dylid ei optimeiddio i helpu amser lwytho'r dudalen. - Tudalen we
Dyma'r dudalen HTML lle byddwch chi'n rhoi eich delwedd symudol.
01 o 06
Dechrau
- Dechreuwch Dreamweaver
- Agorwch y dudalen we lle rydych chi eisiau eich taflunydd
02 o 06
Mewnosod Gwrthrych Delwedd Delwedd Rollover
Mae Dreamweaver yn ei gwneud hi'n hawdd creu delwedd symudol.
- Ewch i'r ddewislen Insert ac i lawr i'r is-ddewislen "Object Objects".
- Dewiswch "Image rollover" neu "Rollover image"
Mae rhai fersiynau hŷn o Dreamweaver yn ffonio'r Delweddau Gwrthrychiol "Delweddau Rhyngweithiol" yn lle hynny.
03 o 06
Dywedwch wrth Dreamweaver Pa Delweddau i'w Defnyddio
Mae Dreamweaver yn cynnwys blwch deialog gyda'r meysydd y mae angen i chi eu llenwi i greu eich delwedd symudol.
Enw Delwedd
Dewiswch enw delwedd sy'n unigryw ar gyfer y dudalen. Dylai fod yn un gair, ond gallwch ddefnyddio rhifau, tanlinellu (_) a chysylltiadau (-). Bydd hyn yn cael ei ddefnyddio i nodi'r ddelwedd i newid.
Delwedd wreiddiol
Dyma URL neu leoliad y ddelwedd a fydd yn dechrau ar y dudalen. Gallwch ddefnyddio URLau llwybr cymharol neu absoliwt yn y maes hwn. Dylai hwn fod yn ddelwedd sy'n bodoli ar eich gweinydd gwe neu y byddwch yn llwytho i fyny gyda'r dudalen.
Delwedd Rollover
Dyma'r ddelwedd a fydd yn ymddangos pan fyddwch chi'n llygoden dros y ddelwedd. Yn union fel y delwedd wreiddiol, gall hyn fod yn llwybr absoliwt neu berthynas i'r ddelwedd, a dylai fodoli neu gael ei lwytho i fyny pan fyddwch yn llwytho'r dudalen i fyny.
Delwedd Rollover Preload
Dewisir yr opsiwn hwn yn ddiofyn oherwydd ei bod yn helpu'r rholio yn ymddangos yn gyflymach. Trwy ddewis paratoi'r ddelwedd symudol, bydd y porwr gwe yn ei storio mewn cache nes i'r llygoden fynd drosodd.
Testun arall
Mae testun da yn ail yn gwneud eich delweddau yn fwy hygyrch. Dylech bob amser ddefnyddio rhyw fath o destun arall wrth ychwanegu unrhyw ddelweddau.
Pan Cliciwyd, Ewch i URL
Bydd y rhan fwyaf o bobl yn clicio ar ddelwedd pan fyddant yn gweld un ar dudalen. Felly dylech fod yn arfer eu gwneud yn glicio. Mae'r opsiwn hwn yn eich galluogi i bennu'r dudalen neu'r URL i fynd â'r gwyliwr pan fyddant yn clicio ar y ddelwedd. Ond nid oes angen yr opsiwn hwn i greu rholio.
Pan fyddwch wedi cwblhau'r holl feysydd, cliciwch ar OK i gael Dreamweaver i greu eich delwedd symudol.
Mae'r dudalen nesaf yn dangos y sgript y mae Dreamweaver yn ei ysgrifennu.
04 o 06
Dreamweaver yn Ysgrifenni'r JavaScript i Chi
Os byddwch chi'n agor y dudalen yn y cod-weld fe welwch fod Dreamweaver yn mewnosod bloc o JavaScript yn
eich dogfen HTML. Mae'r bloc hwn yn cynnwys y 3 swyddogaethau y mae angen i chi gael y delweddau'n cyfnewid pan fydd y llygoden yn rholio drosodd a'r swyddogaeth preload os dewisoch hynny.swyddogaeth MM_swapImgRestore ()
swyddogaeth MM_findObj (n, d)
swyddogaeth MM_swapImage ()
swyddogaeth MM_preloadImages ()
05 o 06
Dreamweaver Yn ychwanegu'r HTML ar gyfer y Rollover
Os dewisoch gael Dreamweaver rhaglwytho'r delweddau symudol, yna fe welwch y cod HTML yng nghorff eich dogfen i alw'r sgript preload fel bod eich delweddau'n llwytho'n gyflymach.
onload = "MM_preloadImages ('shasta2.jpg')"
Mae Dreamweaver hefyd yn ychwanegu'r holl god ar gyfer eich delwedd a'i dolenni (os ydych wedi cynnwys URL). Ychwanegir y gyfran olrhain at y tag angor fel nodweddion trawiadol a phriodol.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 o 06
Prawf Allan y Rhollen
Edrychwch ar y ddelwedd symudol llawn weithredol a dysgu beth sydd ar feddwl Shasta.