Hvordan lage bytter med flere bilder i Dreamweaver

Før du begynner å lage et mer komplekst sidedesign med Dreamweavers Swap Image-atferd, se på en ferdig side. Med funksjonen Bytt bilde kan du erstatte alle eller alle bildene på en side.

Når du bruker oppførselen Bytt bilde, er det viktig å gjøre alle bildene du vil bytte, i samme størrelse (høyde og bredde). Hvis bildene ikke har samme størrelse, vil alle bildene unntatt det første bli strukket eller komprimert for å passe til plassen som tar opp av det første bildet som er satt inn på siden.

Hvis du bruker funksjonen Bytt bilde med en serie bilder som ikke alle har samme høyde og bredde, har du noen få alternativer:

Beskjær de større slik at alle bildene har samme størrelse.

Få horisontale og vertikale bilder til å ta opp samme plass i designet ved å kombinere to vertikale bilder for hvert horisontalt. Bare lag en fil i et program som Photoshop, sett inn to vertikale bilder i samme fil ved siden av hverandre, og dimensjoner deretter bildet slik at filen har samme størrelse som ett horisontalt bilde.

Lag én bildefil på størrelse med det største bildet ditt, sett bakgrunnen til en nøytral farge, for eksempel svart eller hvit, og sett deretter inn alle andre bilder på bakgrunnen slik at du kan lagre dem alle med samme filstørrelse.

Følg disse trinnene for å bruke Swap Image-atferden:

1Lag et sidedesign med alle bildene du vil ha vist til å begynne med.

Hvert av de tre bildene i sidedesignet for Tower Bridge i London har to kopier: ett miniatyrbilde og ett større versjon. Når siden først lastes inn i en nettleser, plasseres alle tre miniatyrbildene nederst på siden, med den første av de tilsvarende større versjonene vist i hovedområdet rett over miniatyrbildene.

2 Navngi bildene dine i eiendomsinspektøren.

For å målrette bildene dine med JavaScript, som er hvordan atferd fungerer, må du først gi hvert bilde en unik ID. Bilde-IDen er ikke det samme som bildefilnavnet eller tekstkoden, selv om du kan bruke samme eller lignende navn. Bilde-ID-er skal ikke ha mellomrom eller spesialtegn.

3Velg Vindu→Atferd.

Atferd-panelet åpnes. Du kan dra Behaviour-panelet et annet sted på siden, og du kan utvide det ved å dra bunnen eller siden. Det kan også være lurt å lukke andre åpne paneler for å få mer plass ved å klikke på den mørkegrå linjen øverst på et hvilket som helst panel.

4Velg et bilde.

Velg bildet på siden som skal fungere som utløser for handlingen.

5Velg funksjonen Bytt bilde.

Med triggerbildet valgt i arbeidsområdet, klikk på plusstegnet i Behaviour-panelet for å åpne rullegardinlisten med handlinger, og velg handlingen du vil bruke.

6 Spesifiser bildene som skal byttes i dialogboksen Bytt bilde.

I Bilder-listen velger du ID for bildet som skal erstattes. Klikk på Bla gjennom-knappen for å velge bildet som erstatter hovedbildet. Hvis bildet ikke allerede er lagret i den lokale nettstedsmappen, vil Dreamweaver tilby å kopiere det dit for deg.

7 Nederst i dialogboksen Bytt bilde velger du alternativet Forhåndslast bilder for å instruere nettleseren om å laste alle bilder inn i hurtigbufferen når siden er lastet.

Hvis du ikke velger dette alternativet, kan det oppstå en forsinkelse når bildebyttet brukes.

8Hvis du vil, fjerner du merket for Gjenopprett bilder OnMouseOut.

Alternativet Restore Images OnMouseOut betyr at når en hendelse er fullført (for eksempel når musen flyttes bort fra det utløsende miniatyrbildet), erstattes det originale bildet. Som standard forhåndsvelger Dreamweaver dette alternativet for funksjonen Bytt bilde. Det kan være lurt å velge bort dette alternativet hvis du oppdager at det å erstatte originalbildet hver gang du ruller markøren over et annet miniatyrbilde er distraherende.

9 Etter at du har spesifisert alle innstillingene for virkemåten, klikker du OK.

Den nye virkemåten vises i atferdspanelet.

10 Spesifiser en hendelse for oppførselen.

Etter at handlingen er tatt i bruk, kan du gå tilbake og spesifisere hvilken hendelse som skal utløse handlingen. Som standard bruker Dreamweaver OnMouseOver-hendelsen når du bruker Bytt bilde-handlingen, men du kan endre denne hendelsen til en hvilken som helst tilgjengelig, for eksempel OnClick, som krever at brukeren klikker på bildet for å utløse Bytt bilde-handlingen.

11 Bruk ytterligere atferd.

For å bruke Swap Image-atferden til andre bilder på en side, gjenta trinn 5–10, klikk for å velge bildet du vil tjene som utløser og spesifiser deretter det tilsvarende bildet som skal byttes.

12Test arbeidet ditt i en nettleser.

Du kan ikke se effekten av atferd som denne før du klikker på Live view-knappen øverst til venstre i arbeidsområdet i Dreamweaver eller forhåndsviser siden din i en nettleser.