In wachtwurdenôfbylding is in byld dat feroaret oan in oare ôfbylding as jo of jo klant de mûs oer dizze rôlje. Dizze wurde normaal brûkt om in ynteraktyf te meitsjen lykas knoppen of ljeppers. Mar jo kinne skilderijen meitsje fan justjes oer alles.
Dit tutorial is ûntwikkele om te helpen dat jo in rolloverôfbylding meitsje yn Dreamweaver . It is bedoeld foar gebrûk troch minsken dy't de folgjende ferzjes fan Dreamweaver brûke:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Bedriuwen foar dit Tutorial
- Dreamweaver
Ien fan 'e ferzjes dy't hjirboppe neamd binne. - In orizjinele byld
Soargje derfoar dat dit byld optimisearje sil. Dit sil jo siden helder flugger leare. - De rolloverôfbylding
Dit byld moat deselde ôfmjittings wêze as it orizjinele byld. En, lykas it orizjineel ôfbylding, moatte optimisearre wurde om help fan sidebelied te helpen. - In webside
Dit is de side fan HTML wêr't jo jo rolloverôfbylding sette.
01 of 06
Begjinne
- Start Dreamweaver
- Iepenje de webside wêr jo jo wachtwurden wolle
02 of 06
In rolloverôfbylding objektje ynfoegje
Dreamweaver makket it maklik om in rolloverôfbylding te meitsjen.
- Gean nei it ynfiermenu en nei it submenu "Image Objects".
- Selektearje "ôfbyldingswulver" of "Werombyldôfbylding"
Guon âldere ferzjes fan Dreamweaver neame it Image Objects "Interactive Images" yn plak.
03 of 06
Fertel Dreamweaver hokker ôfbyldings brûke
Dreamweaver bliuwt in dialoochfinster mei de fjilden dy't jo nedich hawwe om jo rolloverôfbylding te meitsjen.
Image Name
Kies in byldnamme dy't unyk is foar de side. It moat allegearre ien wurd wêze, mar jo kinne nûmers brûke, ûnderstrekke (_) en hyphens (-). Dit sil brûkt wurde om de ôfbylding te identifisearjen om te feroarjen.
Original Image
Dit is de URL of lokaasje fan it byld dat begjint op 'e side. Jo kinne relatyf of absolute URL-adressen brûke op dit fjild. Dit moat in ôfbylding wêze dat jo op jo webserver bestiet, of dat jo mei de side ynlade.
Rollover-ôfbylding
Dit is it byld dat jo ferskine as jo mûs oer it byld hawwe. Krekt as it orizjinele byld kin dit in absolute of relatyf punt wêze foar it byld, en it moat bestean of opladen as jo de side ynlade.
Preloadwolfoverôfbylding
Dizze opsje is standert selektearre omdat it helpt de rollover makliker makket. Troch it selektearjen om it skermôfbylding te foarsjen, sil de websneur it yn in cache opslaan, oant de mûs oerhellet.
Alternatyf tekst
Goed alternatyf tekst makket jo bylden tagonklik tagonkliker. Jo moatte altyd in stikje alternatyf tekst brûke as jo alle ôfbyldings taheakje.
As jo klikke, Gean nei URL
De measte minsken sille op in ôfbylding klikke as se ien op in side sjogge. Sa moatte jo yn 'e gewoante wêze om se klikber te meitsjen. Dizze opsje lit jo de side of URL opjaan om de besiker te nimmen as se op it ôfbylding klikke. Mar dizze opsje is net nedich om in oerslach te meitsjen.
As jo al de fjilden foltôge hawwe, klik dan OK om Dreamweaver te meitsjen fan jo rolloverôfbylding.
De folgjende side lit it skript sjen dat Dreamweaver skriuwt.
04 of 06
Dreamweaver skriuwt it JavaScript foar jo
As jo de side iepenje yn code-view sjogge jo dat Dreamweaver in blok fan JavaScript ynsteket yn 'e
fan jo HTML dokumint. Dit blok befettet de 3 funksjes dy 't nedich hawwe om de ôfbyldings te wikseljen wannear't de mûs oer har oerwint en de preloadfunksje as jo dêrfoar keazen hawwe.funksje MM_swapImgRestore ()
funksje MM_findObj (n, d)
funksje MM_swapImage ()
funksje MM_preloadImages ()
05 of 06
Dreamweaver fiert de HTML foar it Rollover
As jo keazen hawwe foar Dreamweaver te preloaden fan 'e rolloverôfbyldings, dan sjogge jo de HTML-koade yn it lichem fan jo dokumint om it preeloadskript te neamen sadat jo ôfbyldings flugger laden.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver falt ek alle koade foar jo ôfbylding en keppelet it (as jo in URL opnommen hawwe). It tafoegjen diel wurdt taheakke oan 'e anker tag as asmouseover en onmouseout attributen.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 van 06
Besykje it Rollover
Sjoch it folsleine funksjonele rolloverôfbylding en leare wat op Shasta's gedachte.