Hvordan lage et enkelt Rollover-bilde i Dreamweaver

Rollovers er en så populær funksjon at Dreamweaver inneholder en spesiell dialogboks bare for rollovers: Dialogboksen Innfør rotasjonsbilde. Rollover bilder, som navnet tilsier, er utformet for å reagere når noen ruller en markør over et bilde. Effekten kan være så dramatisk som et bilde av en hund som blir erstattet av et bilde av en løve, eller så subtile som fargen på et ordskifte.

Du kan opprette mer komplekse bildeoverføringer med alternativet Swap Image fra panelet Behaviors. Alternativet Swap Image gjør at du kan endre flere bilder samtidig.

For å lage en enkel overgangseffekt med to bilder ved hjelp av Dreamweaver's Insert Image Rollover-dialogboksen, følg disse trinnene:

1. Plasser markøren på siden der du vil at overføringen skal vises.

   Rollover-effekter krever minst to bilder: en for startstatus og en for overgangsstatus. Du kan bruke to forskjellige bilder eller to lignende, men begge skal ha de samme dimensjonene. Ellers ser du merkelige skaleringseffekter fordi begge bildene må vises på nøyaktig samme plass på siden.

2. Velg Sett inn → Bilde → Rollover bilde.

   Alternativt kan du bruke rullegardinlisten som er tilgjengelig fra ikonet Bilder i fellesinnleggspanelet, og velg Rollover Image.

   Dialogboksen Innstille rullegardinbilde vises.

   

3. Naviger bildet i boksen Bildenavn.

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

4. I det opprinnelige bildet-boksen angir du det første bildet du vil ha synlig. Bruk Bla gjennom-knappen for å finne og velg bildet.

   Hvis bildene ikke allerede er i din lokale nettverksmappe, kopierer Dreamweaver dem til nettstedet ditt når du oppretter overgangen.

5. I feltet Rollover Image, skriv inn bildet du vil bli synlig når en besøkende beveger markøren over det første bildet.

   Igjen, kan du bruke Browse-knappen til å finne og velge bildet.

6. Marker avkrysningsruten for forhåndsvisning av bilde for å laste inn alle overførte bilder i nettleserens cache når siden først lastes.

   Hvis du ikke velger å gjøre dette trinnet, kan de besøkende oppleve en forsinkelse fordi det andre bildet ikke lastes ned til en markør er rullet over det opprinnelige bildet.

7. I feltet Alternativ tekst, skriv 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 viktig del av webtilgjengelighet fordi denne teksten leses høyt av spesielle nettlesere som kalles 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.

8. I Når klikket, Gå til URL-boksen, skriv inn en hvilken som helst nettadresse eller bla for å finne en annen side på nettstedet du vil koble til.

   Hvis du ikke spesifiserer en URL, legger Dreamweaver automatisk # -tegnet som plassholder i koden.

   Tegnet # er en vanlig metode for å lage lenker som ikke kobler hvor som helst. 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 overføringen din skal lenke, må du erstatte # -tegnet med en lenke til en annen side.

9. Klikk på OK.

   Bildene settes opp automatisk som en overgang.

10. For å se overføring i handling, lagre filen og klikk deretter på klodenikonet øverst i arbeidsområdet for å forhåndsvise siden din i en nettleser.

Du kan se hvordan overføringen din fungerer i Dreamweaver's Design-visning eller ved hjelp av alternativet Live-visning. Når du klikker på Live-knappen øverst til venstre i arbeidsområdet, slår du i hovedsak Dreamweaver inn i en nettleser som viser sider som Chrome-nettleseren.

Når du forhåndsviser en side på datamaskinen som inneholder et overgangsbilde, viser noen nettlesere en advarsel om at du må tillate ActiveX-kontroller å vise siden. Dette er en sikkerhetsadvarsel som bare vises når siden åpnes på samme datamaskin der siden er lagret.

Hvis du publiserer siden til en webserver og deretter ser den over en Internett-tilkobling, vil du og dine besøkende ikke se denne feilen.

Kreditt: Kunstverk av istockphoto. no