Hvordan lage et enkelt rollover-bilde i Dreamweaver

Rollovers er en så populær funksjon at Dreamweaver inkluderer en spesiell dialogboks bare for rollovers: dialogboksen Insert Rollover Image. Rollover-bilder, som navnet tilsier, er designet for å reagere når noen ruller en markør over et bilde. Effekten kan være like dramatisk som et bilde av en hund som blir erstattet av et bilde av en løve, eller så subtil som fargen på et ord endrer seg.

Du kan lage mer komplekse rollover-bildeeffekter med alternativet Bytt bilde fra Behaviors-panelet. Alternativet Bytt bilde lar deg endre flere bilder samtidig.

Følg disse trinnene for å lage en enkel rollover-effekt med to bilder ved å bruke Dreamweavers Insert Image Rollover-dialogboks:

Plasser markøren på siden der du vil at overrullingen skal vises.

Rollover-effekter krever minst to bilder: ett for starttilstanden og ett for rollovertilstanden. Du kan bruke to forskjellige bilder eller to like bilder, men begge skal ha samme dimensjoner. Ellers ser du merkelige skaleringseffekter fordi begge bildene må vises på nøyaktig samme plass på siden.

Velg Sett inn → Bilde → Rullbilde.

Alternativt kan du bruke rullegardinlisten tilgjengelig fra Bilder-ikonet i Common Insert-panelet og velge Rollover Image.

Dialogboksen Insert Rollover Image vises.

Gi bildet et navn i boksen Bildenavn.

Før du kan bruke en atferd på et element, for eksempel et bilde, må elementet ha et navn slik at atferdsskriptet kan referere til det. Du kan navngi elementer hva du vil så lenge du ikke bruker mellomrom eller spesialtegn.

I Original Image-boksen angir du det første bildet du vil ha synlig. Bruk Bla gjennom-knappen for å finne og velge bildet.

Hvis bildene ikke allerede er i den lokale nettstedsmappen, kopierer Dreamweaver dem til nettstedet ditt når du oppretter rollover.

I Rollover Image-boksen skriver du inn bildet du vil skal bli synlig når en besøkende flytter markøren over det første bildet.

Igjen kan du bruke Bla gjennom-knappen for å finne og velge bildet.

Merk av for forhåndslast rollover-bilde for å laste alle rollover-bilder inn i nettleserens hurtigbuffer når siden først lastes inn.

Hvis du ikke velger å gjøre dette trinnet, kan de besøkende oppleve en forsinkelse fordi det andre bildet ikke blir lastet ned før en markør rulles over det originale bildet.

I feltet Alternativ tekst skriver du inn en beskrivelse av bildene.

Alternativ tekst er valgfri, men anbefales fordi bruk av søkeord kan forbedre søkemotoroptimalisering. Tilsvarende er alternativ tekst en sentral del av netttilgjengelighet fordi denne teksten leses opp av spesielle nettlesere kalt skjermlesere, som brukes av personer som er blinde og andre med begrenset syn eller mobilitet. Alternativ tekst vises kun i nettleseren hvis bildene ikke er synlige.

I boksen Gå til URL når du klikker, skriv inn en nettadresse eller bla for å finne en annen side på nettstedet ditt som du vil koble til.

Hvis du ikke angir en URL, setter Dreamweaver automatisk inn #-tegnet som en plassholder i koden.

#-tegnet er en vanlig teknikk for å lage lenker som ikke lenker noe sted. Fordi rollover-bilder som ikke lenker til en annen side har mange gode bruksområder, er denne teknikken nyttig. Bare husk at hvis du vil at overrullingen din skal lenke, må du erstatte #-tegnet med en lenke til en annen side.

Klikk OK.

Bildene settes opp automatisk som en rollover.

For å se overrullingen i aksjon, lagre filen og klikk deretter på globusikonet øverst i arbeidsområdet for å forhåndsvise siden din i en nettleser.

Du kan se hvordan overrullingen din fungerer i Dreamweavers designvisning eller ved å bruke alternativet Live view. Når du klikker på Live-knappen øverst til venstre i arbeidsområdet, gjør du egentlig Dreamweaver til en nettleser som viser sider omtrent som Chrome-nettleseren.

Når du forhåndsviser en side på datamaskinen din som inneholder et rollover-bilde, vil noen nettlesere vise en advarsel som sier at du må tillate ActiveX-kontroller å se siden. Dette er en sikkerhetsadvarsel som vises kun når siden åpnes på samme datamaskin som siden er lagret.

Hvis du publiserer siden til en webserver og deretter viser den over en Internett-tilkobling, vil ikke du og de besøkende på nettstedet se denne feilen.

Kreditt: Kunstverk av istockphoto.com