Hur man skapar byten med flera bilder i Dreamweaver

Innan du börjar skapa en mer komplex siddesign med Dreamweavers Swap Image-beteende, titta på en färdig sida. Med beteendet Byt bild kan du ersätta någon eller alla bilder på en sida.

När du använder beteendet Byt bild är det viktigt att alla bilder som du ska byta har samma storlek (höjd och bredd). Om bilderna inte är av samma storlek kommer alla bilder utom den första att sträckas ut eller komprimeras för att passa utrymmet som den första bilden infogas på sidan.

Om du använder beteendet Byt bild med en serie bilder som inte alla har samma höjd och bredd, har du några alternativ:

Beskär de större så att alla bilder har samma storlek.

Få horisontella och vertikala bilder att ta upp samma utrymme i din design genom att kombinera två vertikala bilder för varje horisontell. Skapa helt enkelt en fil i ett program som Photoshop, infoga två vertikala bilder i samma fil sida vid sida och storleksanpassa sedan bilden så att filen har samma storlek som en horisontell bild.

Skapa en bildfil i storleken på din största bild, ställ in bakgrunden till en neutral färg, som svart eller vit, och infoga sedan alla andra bilder på bakgrunden så att du kan spara dem alla med samma filstorlek.

Följ dessa steg för att använda beteendet Byt bild:

1Skapa en siddesign med alla bilder du vill ska visas från början.

Var och en av de tre fotona i siddesignen för Tower Bridge i London har två exemplar: en miniatyrbild och en större version. När sidan först laddas i en webbläsare, placeras alla tre miniatyrbilderna längst ner på sidan, med den första av motsvarande större versioner som visas i huvudområdet precis ovanför miniatyrerna.

2 Namnge dina bilder i fastighetsinspektören.

För att rikta in dina bilder med JavaScript, vilket är hur beteenden fungerar, ge först varje bild ett unikt ID. Bild-ID:t är inte detsamma som bildfilnamnet eller texttaggen, även om du kan använda samma eller liknande namn. Bild-ID:n ska inte ha mellanslag eller några specialtecken.

3Välj Fönster→Beteenden.

Panelen Beteende öppnas. Du kan dra panelen Beteende någon annanstans på sidan, och du kan utöka den genom att dra i botten eller sidan. Du kanske också vill stänga alla andra öppna paneler för att göra mer utrymme genom att klicka på den mörkgrå stapeln överst på valfri panel.

4Välj en bild.

Välj bilden på sidan som kommer att fungera som utlösare för åtgärden.

5Välj beteendet Byt bild.

Med triggerbilden vald i arbetsytan klickar du på plustecknet i panelen Beteende för att öppna rullgardinsmenyn med åtgärder och väljer den åtgärd du vill tillämpa.

6Ange bilderna som ska bytas i dialogrutan Byt bild.

I listan Bilder väljer du ID för bilden som ska ersättas. Klicka på knappen Bläddra för att välja bilden som ersätter huvudbilden. Om bilden inte redan är sparad i den lokala webbplatsmappen, erbjuder Dreamweaver att kopiera den dit åt dig.

7Längst ned i dialogrutan Byt bild, välj alternativet Förladda bilder för att instruera webbläsaren att ladda alla bilder i cachen när sidan laddas.

Om du inte väljer det här alternativet kan en fördröjning uppstå när bildbytet används.

8Om du vill, avmarkera alternativet Återställ bilder OnMouseOut.

Alternativet Restore Images OnMouseOut betyder att när en händelse är slutförd (som när musen flyttas från den utlösande miniatyrbilden), ersätts originalbilden. Som standard förväljer Dreamweaver detta alternativ för beteendet Byt bild. Du kanske vill avmarkera det här alternativet om du upptäcker att det är distraherande att ersätta originalbilden varje gång du flyttar markören över en annan miniatyr.

9När du har angett alla inställningar för beteendet klickar du på OK.

Det nya beteendet visas i panelen Beteende.

10Ange en händelse för beteendet.

När åtgärden har tillämpats kan du gå tillbaka och ange vilken händelse som ska utlösa åtgärden. Som standard tillämpar Dreamweaver händelsen OnMouseOver när du använder åtgärden Byt bild, men du kan ändra händelsen till vilken som helst tillgänglig, till exempel OnClick, vilket kräver att användaren klickar på bilden för att utlösa åtgärden Byt bild.

11 Tillämpa ytterligare beteenden.

För att tillämpa beteendet Byt bild på andra bilder på en sida, upprepa steg 5–10, klicka för att välja den bild som du vill ska fungera som en utlösare och ange sedan motsvarande bild som ska bytas.

12Testa ditt arbete i en webbläsare.

Du kan inte se effekterna av beteenden som detta förrän du klickar på knappen Livevy uppe till vänster på arbetsytan i Dreamweaver eller förhandsgranskar din sida i en webbläsare.