Et overgangsbilde er et bilde som endrer seg til et annet bilde når du eller din kunde ruller musen over den. Disse brukes ofte til å lage en interaktiv følelse som knapper eller faner. Men du kan lage rollover bilder ut av omtrent alt.
Denne opplæringen er laget for å hjelpe deg med å lage et overgangsbilde i Dreamweaver. Den er beregnet for bruk av folk som bruker følgende versjoner av Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Krav til denne opplæringen
- DreamweaverEn av versjoner oppført ovenfor.
- Et originalt bildeSørg for å optimalisere dette bildet. Dette vil hjelpe sidene dine til å lastes raskere.
- Rollover bildetDette bildet skal ha samme dimensjoner som det opprinnelige bildet. Og, som det opprinnelige bildet, bør det optimaliseres for å hjelpe sideopplastningstider.
- En nettsideDette er HTML-siden der du legger bildeoverføringsbildet ditt.
Kom i gang
- Start Dreamweaver
- Åpne nettsiden der du vil ha overgangen din
Sett inn et Rollover Image Object
Dreamweaver gjør det enkelt å lage et overgangsbilde.
- Gå til Sett inn-menyen og ned til Bildeobjekter undermeny.
- Å velge Bildeoverføring eller Utvikle bilde.
Noen eldre versjoner av Dreamweaver kaller bildobjektets "interaktive bilder" i stedet.
Fortell Dreamweaver Hvilke bilder du skal bruke
Dreamweaver dukker opp en dialogboks med feltene du må fylle ut for å lage ditt overføringsbilde.
Bilde navn
Velg et bildenavn som er unikt for siden. Det skal være alt ett ord, men du kan bruke tall, understreker (_) og bindestreker (-). Dette vil bli brukt til å identifisere bildet som skal endres.
Opprinnelig bilde
Dette er nettadressen eller plasseringen av bildet som skal starte på siden. Du kan bruke relative eller absolutte URL-adresser i dette feltet. Dette bør være et bilde som eksisterer på webserveren din eller at du laster opp med siden.
Rull bilde
Dette er bildet som vil vises når du musen over bildet. På samme måte som det opprinnelige bildet, kan dette være en absolutt eller relativ vei til bildet, og den bør eksistere eller bli lastet opp når du laster opp siden.
Forhåndsinnstillingsrullebilde
Dette alternativet er valgt som standard fordi det hjelper overgangen til å vises raskere. Ved å velge å forhåndslaste overføringsbildet, lagrer nettleseren det i en cache til musen ruller over det.
Alternativ tekst
God alternativ tekst gjør bildene dine mer tilgjengelige. Du bør alltid bruke noen type alternativ tekst når du legger til noen bilder.
Når du klikker, gå til URL
De fleste vil klikke på et bilde når de ser en på en side. Så du bør være vant til å gjøre dem klikkbare. Dette alternativet lar deg spesifisere siden eller nettadressen for å ta betrakteren til når de klikker på bildet. Men dette alternativet er ikke nødvendig for å opprette en overgang.
Når du har fullført alle feltene, klikker du OK å ha Dreamweaver lage ditt overgangsbilde.
Dreamweaver Skriver JavaScript for deg
Hvis du åpner siden i kodevisning, ser du at Dreamweaver legger inn en blokk med JavaScript i
av HTML-dokumentet ditt. Denne blokken inneholder de 3 funksjonene du trenger for å bytte bilder, når musen ruller over dem og forhåndsbelastningsfunksjonen hvis du har valgt det.
funksjonen MM_swapImgRestore ()funksjonen MM_findObj (n, d)funksjonen MM_swapImage ()funksjonen MM_preloadImages () Hvis du velger å ha Dreamweaver forhåndsvisning av overføringsbildene, så vil du se HTML-koden i dokumentets kropp for å ringe forhåndsinnstillingsskriptet slik at bildene dine lastes raskere. onload- = "MM_preloadImages ( 'shasta2.jpg')" Dreamweaver legger også til all koden for bildet ditt og kobler det til (hvis du inkluderte en URL). Rolloverdelen legges til ankermerket som onmouseover og onmouseout attributter. onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)" Se det fullt funksjonelle rollover bildet og lær hva som er på Shastas sinn. Dreamweaver Legger til HTML for Rollover
Test ut rolllover
