Globale linker
Dreamweaver
- Intro
- Site-management
- FTP
- Arbeids-området
- Tekst
- Bilder
- Tabeller
- Celler
- Kommentarer
- Invisibles
- Pageproperties
- HTML styles
- Rollovers
- Library items
- Frames
- Layers
- Timeline
- Stylesheets 1
- Stylesheets 2
- Stylesheets 3
<rollovers>
Du har helt sikkert sett dem, rolloverne, på nettet. En knapp skifter uttrykk når du drar musepekeren over den, eller at det popper opp et bilde et annet sted på siden når du drar over knappen/linken med muspekeren.
Og dette er så enkelt å få til i DW. Det du trenger er 2 «bilder» av knappen; en utgave for normal og en for når musepekeren er over knappen.
+ 
=
Framgangsmåten er som følger:
Fra verktøypaletten velger du «Insert Rollover Image» 
. Da får du følgende palett:
I «Image Name» legger du inn navnet på knappen. Det er viktig å navngi de forskjellige elementene på en side, for lett å kunne finne fram til riktig element ved scripting.
I «Original Image» finner du fram til bildet som representerer knappen ved vanlig status.
I «Rollover Image» finner du fram til bildet som representerer knappen ved rollover-status, altså når musepekeren er over knappen.
Ha alltid «Preload Rollover Image» valgt, for da blir rolloverbildet lastet inn i minnet på maskinen når siden lastes ned.
I «When Clicked Go To URL» legger du inn adressen til den siden du skal peke til med knappen. Er det en side på egen site, klikker du på «Browse»-knappen og finner fram til filen. Er det en side utenfor egen site, skriver du inn hele adressen. Så klikker vi OK.
Dreamweaver setter nå inn JavaScript på riktig plass for oss. Hvis du ser i <head> har det nå dukket opp en mengde med kode. Denne koden er så lang og komplisert fordi Macromedia vil at funksjonene skal fungere i de fleste browserne.
Du kan gjøre akkurat det samme, og da mener jeg rollover-effekter, ved å benytte andre JavaScript, som er skrevet for å bytte bilder. På nettet finner du mengder av gratis ressurser, hvor du finner ferdiglagde JavaScript, og med oppskrift på hvordan de brukes. Eksempler på dette er: Javascript.com og Javascripts.com (åpnes i nye vinduer). I DW finner du ferdiglagde JavaScript i «Behaviors»-paletten.
Manuell Rollover
Marker bildet/knappen du vil bytte ut, trykk på 
i Behaviors-paletten, du får da opp en liste med valg, bla deg ned til Swap Image. Da får du følgende dialogboks:
Her ser du viktigheten av å navngi de forskjellige grafiske elementene på en side, for det er ikke lett å finne fram til riktig bilde, med en haug med «unnamed <img>». Men DW hjelper deg til og med her. Det bildet du markerte som skal byttes ut er allerede valgt/markert, så det er bare å klikke «Browse» for «Set Source to» og finne fram til bildet som det skal byttes til ved onMouseOver. Pass på at du har både «Preload Images» og «Restore Images OnMouseOut» avmerket. Husk at bildet du skal bytte til må ha samme dimensjoner som bilde som allerede står der.
Er ikke «Restore Images OnMouseOut» å finne i dialogboksen, klikker du OK. Så trykker du på igjen og velger «Swap Image Restore» fra listen over tilgjengelige actions.
Rollover et annet sted på siden
Vi kan også bytte ut bilder andre steder på siden med Behaviors. Ved OnMouseOver på f.eks. en tekstlink, bytter du ut et bilde et annet sted på siden. Sånn som dette.
(før musepekeren over linken, NB! ikke klikkbar link)
Dette gjør du ved å markere tekstlinken og så følge fremgansgmåte som over med Behaviors.
Nå er det om å gjøre at du har navngitt bildet som skal nyttes ut, for du må angi i listen over alle bildene som finnes i dokumentet, hvilket som skal byttes ut.
Pass på at det står «onMouseOver» på Swap Image og «onMouseOut» på Swap Image Restore i Behaviors paletten. Gjør det ikke det må du gjøre om «event'et», eller handlingen, som utløser «action'et».
Det gjør du ved å markere event/action i Behaviors-paletten, slik at linjen blir blå. Mellom Event og Action er det en svart og liten nedoverpekende trekant. Klikk på denne får å få fram valgene du har tilgjengelig. Så må du velge riktig Event som skal utløse Action'et.
Det et onMouseOver (event) > Swap Image (action) egentlig sier er:
når musepekeren kommer over objektet (event), skal det byttes ut et bilde (action).
eller ved onMouseOut (event) > Swap Image Restore (action):
når musepekeren forlater objektet (event), skal vi ha tilbake det originale bildet igjen (action).
Gå til neste side hvor vi skal se på Library paletten
