Et rollover-billede er et billede, der skifter til et andet billede, når du eller din kunde ruller musen over det. Disse bruges normalt til at skabe en interaktiv følelse som knapper eller faner. Men du kan skabe rollover billeder ud af næsten alt.
Denne vejledning er designet til at hjælpe dig med at oprette et rollover-billede i Dreamweaver. Den er beregnet til brug af personer, der bruger følgende versioner af Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Krav til denne vejledning
- DreamweaverEn af versionerne ovenfor.
- Et originalt billedeSørg for at optimere dette billede. Dette vil hjælpe dine sider indlæse hurtigere.
- RolloverbilledetDette billede skal have samme dimensioner som det originale billede. Og ligesom det originale billede bør optimeres for at hjælpe sideindlæsningstider.
- En websideDette er HTML-siden, hvor du sætter dit overgangsbilde.
Kom igang
- Start Dreamweaver
- Åbn den webside, hvor du ønsker din overførsel
Indsæt et Rollover Image Object
Dreamweaver gør det nemt at oprette et rollover-billede.
- Gå til menuen Indsæt og ned til Billedobjekter undermenu.
- Vælg Billedoverførsel eller Rollover billede.
Nogle ældre versioner af Dreamweaver kalder i stedet for billedobjekter "Interaktive billeder".
Fortæl Dreamweaver Hvilke billeder skal du bruge
Dreamweaver pops en dialogboks med de felter, du skal udfylde for at oprette dit rolloverbillede.
Billednavn
Vælg et billednavn, der er unikt for siden. Det skal være alt ét ord, men du kan bruge tal, understreger (_) og bindestreger (-). Dette bruges til at identificere billedet, der skal ændres.
Originalbillede
Dette er webadressen eller placeringen af det billede, der starter på siden. Du kan bruge relative eller absolutte webadresser i dette felt. Dette skal være et billede, der findes på din webserver eller at du uploader med siden.
Rollover Image
Dette er billedet, der vises, når du musen over billedet. Ligesom det originale billede kan dette være en absolut eller relativ vej til billedet, og den bør eksistere eller blive uploadet, når du uploader siden.
Preload Rollover Image
Denne valgmulighed er valgt som standard, fordi den hjælper overførslen vises hurtigere. Ved at vælge at forlæse rolloverbilledet, gemmer webbrowseren det i en cache, indtil musen ruller over det.
Alternativ tekst
God alternativ tekst gør dine billeder mere tilgængelige. Du bør altid bruge en slags alternativ tekst, når du tilføjer billeder.
Når du klikker, Gå til URL
De fleste mennesker vil klikke på et billede, når de ser en på en side. Så du bør være vant til at gøre dem klikbare. Denne indstilling giver dig mulighed for at angive siden eller webadressen for at tage seeren til, når de klikker på billedet. Men denne mulighed er ikke påkrævet for at skabe en rollover.
Når du har udfyldt alle felter, skal du klikke på Okay at have Dreamweaver oprette dit rolloverbillede.
Dreamweaver skriver JavaScript til dig
Hvis du åbner siden i kodevisning, vil du se, at Dreamweaver indsætter en blok af JavaScript i feltet
af dit HTML-dokument. Denne blok indeholder de 3 funktioner, du har brug for at få billederne til at skifte, når musen ruller over dem og preload-funktionen, hvis du vælger det.
funktion MM_swapImgRestore ()funktion MM_findObj (n, d)funktion MM_swapImage ()funktion MM_preloadImages () Hvis du vælger at have Dreamweaver forudindlæste rollover billederne, så vil du se HTML-koden i dokumentets krop for at kalde preload scriptet, så dine billeder indlæses hurtigere. OnLoad = "MM_preloadImages (shasta2.jpg ')" Dreamweaver tilføjer også al koden til dit billede og forbinder det (hvis du inkluderede en URL). Overdragelsesdelen tilføjes til ankeretiketten som onmouseover og onmouseout attributter. onMouseOut = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)" Se det fuldt funktionelle rolloverbillede og lær hvad der er på Shastas sind. Dreamweaver Tilføjer HTML til Rollover
Afprøv rullemaskinen
