Rollover mynd er mynd sem breytist á einhvern annan mynd þegar þú eða viðskiptavinur þinn rúlla músinni yfir það. Þetta eru almennt notaðir til að búa til gagnvirka tilfinningu eins og hnappa eða flipa. En þú getur búið til rollover myndir út af réttlátur óður í nokkuð.
Þessi kennsla er hannaður til að hjálpa þér að búa til rollover mynd í Dreamweaver . Það er ætlað til notkunar af fólki sem notar eftirfarandi útgáfur af Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Kröfur fyrir þessa kennslu
- Dreamweaver
Eitt af útgáfum hér að ofan. - Upprunalega mynd
Vertu viss um að fínstilla þessa mynd. Þetta mun hjálpa síðum þínum að hlaða hraðar. - Rollover myndin
Þessi mynd ætti að vera sú sama og upphafsmyndin. Og, eins og upprunalega myndin, ætti að vera bjartsýni til að hjálpa að hlaða tímum á síðu. - Vefsíðan
Þetta er HTML síðu þar sem þú setur rollover myndina þína.
01 af 06
Byrja
- Byrja Dreamweaver
- Opnaðu vefsíðu þar sem þú vilt rollover þinn
02 af 06
Setjið inn rennismiðju Image Image Object
Dreamweaver gerir það auðvelt að búa til rollover mynd.
- Farðu í Setja inn valmyndina og niður í undirvalmyndina "Image Objects".
- Veldu "Image rollover" eða "Rollover image"
Sumar eldri útgáfur af Dreamweaver kallaðu í stað "Interactive Images" í myndatökum.
03 af 06
Segðu Dreamweaver hvaða myndir á að nota
Dreamweaver birtist í valmynd með reitum sem þú þarft að fylla inn til að búa til rollover myndina þína.
Mynd Nafn
Veldu mynd nafn sem er einstakt fyrir síðuna. Það ætti að vera eitt orð, en þú getur notað tölur, undirstrikar (_) og bandstrik (-). Þetta verður notað til að auðkenna myndina sem á að breyta.
Upprunaleg mynd
Þetta er slóðin eða staðsetning myndarinnar sem mun byrja á síðunni. Þú getur notað ættingja eða alger slóð slóða í þessu sviði. Þetta ætti að vera mynd sem er til staðar á vefþjóninum þínum eða að þú sendir með síðunni.
Snúa mynd
Þetta er myndin sem mun birtast þegar þú músar yfir myndina. Rétt eins og upprunalega myndin getur þetta verið alger eða hlutlæg leið til myndarinnar og það ætti að vera til eða hægt að hlaða upp þegar þú hleður upp síðunni.
Preload Rollover Image
Þessi valkostur er valinn sjálfgefið vegna þess að það hjálpar rollover að birtast hraðar. Með því að velja að preload rollover myndina geymir vafrinn það í skyndiminni þar til músin rúllar yfir hana.
Vinstri texti
Góð varamaður texta gerir myndirnar þínar aðgengilegar. Þú ættir alltaf að nota einhvers konar annan texta þegar þú bætir við einhverjum myndum.
Þegar smellt er skaltu fara í slóðina
Flestir munu smella á mynd þegar þeir sjá einn á síðu. Svo þú ættir að vera vanir að gera þær smella. Þessi valkostur gerir þér kleift að tilgreina síðu eða vefslóð til að taka áhorfandann þegar þeir smella á myndina. En þessi valkostur er ekki nauðsynlegur til að búa til rollover.
Þegar þú hefur lokið öllum sviðum skaltu smella á OK til að hafa Dreamweaver búið til rollover myndina þína.
Næsta síða sýnir handritið sem Dreamweaver skrifar.
04 af 06
Dreamweaver skrifar JavaScript fyrir þig
Ef þú opnar síðuna í kóðaskjánum munt þú sjá að Dreamweaver setur inn blokk af JavaScript í
virka MM_swapImgRestore ()
virka MM_findObj (n, d)
virka MM_swapImage ()
virka MM_preloadImages ()
05 af 06
Dreamweaver Bætir HTML fyrir Rollover
Ef þú velur að hafa Dreamweaver fyrirfram hleypa myndirnar þá munt þú sjá HTML kóða í líkamanum skjalinu þínu til að hringja í preload handritið svo að myndirnar þínar hlaða hraðar.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver bætir einnig öllum kóða fyrir myndina þína og tengir það (ef þú ert með vefslóð). The rollover hluti er bætt við akkeri merkið sem onmouseover og onmouseout eiginleika.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 af 06
Prófaðu útvalið
Sjáðu fulla virkni rollover myndina og læra hvað er á huga Shasta.