En rollover bild är en bild som ändras till en annan bild när du eller din kund rullar musen över den. Dessa brukar användas för att skapa en interaktiv känsla som knappar eller flikar. Men du kan skapa rollover bilder ur nästan vad som helst.
Denna handledning är utformad för att hjälpa dig att skapa en rollover-bild i Dreamweaver. Den är avsedd att användas av personer som använder följande versioner av Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Krav på denna handledning
- DreamweaverEn av de ovan angivna versionerna.
- En originalbildSe till att optimera bilden. Detta kommer att hjälpa dina sidor att ladda snabbare.
- ÖvergångsbildenDen här bilden ska ha samma dimensioner som originalbilden. Och, som den ursprungliga bilden, bör optimeras för att hjälpa sidan att ladda gånger.
- En webbsidaDetta är HTML-sidan där du lägger din rollover-bild.
Komma igång
- Starta Dreamweaver
- Öppna webbsidan där du vill ha övergången
Infoga ett Rollover Image Object
Dreamweaver gör det enkelt att skapa en rollover-bild.
- Gå till Insert-menyn och ner till Bildobjekt undermeny.
- Välj Bildöverföring eller Rollover bild.
Vissa äldre versioner av Dreamweaver kallar istället för bildobjekten "Interactive Images".
Berätta Dreamweaver Vilka bilder ska användas
Dreamweaver dyker upp en dialogruta med fälten du behöver fylla i för att skapa din övergångsbild.
Bildnamn
Välj ett bildnamn som är unikt för sidan. Det ska vara allt ett ord, men du kan använda siffror, understreck (_) och bindestreck (-). Detta kommer att användas för att identifiera bilden som ska ändras.
Originalbild
Detta är webbadressen eller platsen för den bild som börjar på sidan. Du kan använda relativa eller absoluta sökadresser i det här fältet. Det här ska vara en bild som finns på din webbserver eller att du laddar upp med sidan.
Rulla bild
Detta är bilden som kommer att visas när du musen över bilden. Precis som den ursprungliga bilden kan det här vara en absolut eller relativ sökväg till bilden, och den ska finnas eller ladda upp när du laddar upp sidan.
Preload Rollover Image
Det här alternativet är valt som standard eftersom det hjälper till att överföra visas snabbare. Genom att välja att förinställa överföringsbilden lagrar webbläsaren den i en cache tills musen rullar över den.
Alternativ text
Bra alternativ text gör dina bilder mer tillgängliga. Du bör alltid använda någon typ av alternativ text när du lägger till några bilder.
När du klickar, gå till URL
De flesta kommer att klicka på en bild när de ser en på en sida. Så du borde vara vana att göra dem klickbara. Med det här alternativet kan du ange sidan eller webbadressen för att se tittaren när de klickar på bilden. Men det här alternativet är inte nödvändigt för att skapa en rollover.
När du har fyllt i alla fält klickar du på ok att ha Dreamweaver skapa din rollover bild.
Dreamweaver skriver JavaScript för dig
Om du öppnar sidan i kodvisning ser du att Dreamweaver sätter in ett block med JavaScript i
av ditt HTML-dokument. Det här blocket innehåller de 3 funktionerna du behöver för att bilderna ska bytas när musen rullar över dem och förladdningsfunktionen om du väljer det.
funktionen MM_swapImgRestore ()funktion MM_findObj (n, d)funktionen MM_swapImage ()funktionen MM_preloadImages () Om du väljer att ha Dreamweaver förinstallerar överföringsbilderna, så kommer du att se HTML-koden i dokumentets kropp för att ringa förinstallationsskriptet så att dina bilder laddas snabbare. onLoad = "MM_preloadImages ( 'shasta2.jpg')" Dreamweaver lägger också till all kod för din bild och länkar den (om du inkluderade en URL). Övergångsdelen läggs till ankaretiketten som onmouseover och onmouseout attribut. onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ( 'Bild1', '', 'shasta1.jpg', 1)" Se den fullständigt funktionella rollover bilden och lär dig vad som finns på Shastas sinne. Dreamweaver lägger till HTML för Rollover
Testa rullningsledaren
