Sådan opretter du swaps med flere billeder i Dreamweaver

Før du begynder at skabe et mere komplekst sidedesign med Dreamweavers Swap Image-adfærd, skal du se på en færdig side. Med Swap Image-adfærden kan du erstatte et hvilket som helst eller alle billeder på en side.

Når du bruger Swap Image-adfærden, er det vigtigt at lave alle billeder, som du vil bytte om, i samme størrelse (højde og bredde). Hvis billederne ikke har samme størrelse, vil alle billeder undtagen det første blive strakt eller komprimeret, så de passer til den plads, som det første billede indsætter på siden.

Hvis du bruger Swap Image-adfærden med en række billeder, der ikke alle har samme højde og bredde, har du et par muligheder:

Beskær de større, så alle billeder har samme størrelse.

Få vandrette og lodrette billeder til at fylde den samme plads i dit design ved at kombinere to lodrette billeder for hvert vandret. Du skal blot oprette en fil i et program som f.eks. Photoshop, indsætte to lodrette billeder i den samme fil ved siden af ​​hinanden, og derefter dimensionere det billede, så filen har samme størrelse som et vandret billede.

Opret én billedfil på størrelse med dit største billede, indstil baggrunden til en neutral farve, såsom sort eller hvid, og indsæt derefter alle andre billeder på baggrunden, så du kan gemme dem alle med samme filstørrelse.

Følg disse trin for at bruge Swap Image-adfærden:

1Opret et sidedesign med alle de billeder, du vil have vist til at begynde med.

Hvert af de tre billeder i sidedesignet til Tower Bridge i London har to kopier: et miniaturebillede og et større udgave. Når siden først indlæses i en webbrowser, placeres alle tre miniaturebilleder nederst på siden, med den første af de tilsvarende større versioner vist i hovedområdet lige over miniaturerne.

2 Navngiv dine billeder i ejendomsinspektøren.

For at målrette dine billeder med JavaScript, hvilket er sådan adfærd fungerer, skal du først give hvert billede et unikt ID. Billed-id'et er ikke det samme som billedfilnavnet eller tekstmærket, selvom du kan bruge de samme eller lignende navne. Billed-id'er må ikke have mellemrum eller specialtegn.

3Vælg Vindue→Opførsel.

Panelet Adfærd åbnes. Du kan trække panelet Behaviours et andet sted på siden, og du kan udvide det ved at trække dets bund eller side. Du ønsker måske også at lukke andre åbne paneler for at gøre mere plads ved at klikke på den mørkegrå bjælke øverst på et panel.

4Vælg et billede.

Vælg det billede på siden, der skal fungere som udløser for handlingen.

5Vælg funktionsmåden Skift billede.

Med triggerbilledet valgt i arbejdsområdet skal du klikke på plustegnet i panelet Behaviours for at åbne rullelisten med handlinger og vælge den handling, du vil anvende.

6 Angiv de billeder, der skal byttes, i dialogboksen Skift billede.

Vælg ID'et for det billede, der skal erstattes, på listen Billeder. Klik på knappen Gennemse for at vælge det billede, der erstatter hovedbilledet. Hvis billedet ikke allerede er gemt i den lokale webstedsmappe, vil Dreamweaver tilbyde at kopiere det dertil for dig.

7Vælg indstillingen Forudindlæst billeder nederst i dialogboksen Skift billede for at instruere browseren i at indlæse alle billeder i cachen, når siden indlæses.

Hvis du ikke vælger denne mulighed, kan der forekomme en forsinkelse, når billedbyttet bruges.

8Hvis du vil, skal du fravælge indstillingen Gendan billeder OnMouseOut.

Muligheden Gendan billeder OnMouseOut betyder, at når en begivenhed er fuldført (såsom når musen flyttes væk fra det udløsende miniaturebillede), erstattes det originale billede. Som standard forhåndsvælger Dreamweaver denne indstilling for funktionsmåden Skift billede. Du vil måske fravælge denne indstilling, hvis du opdager, at det er distraherende at erstatte det originale billede, hver gang du ruller markøren over et andet miniaturebillede.

9Når du har angivet alle indstillinger for adfærden, skal du klikke på OK.

Den nye adfærd vises i panelet Adfærd.

10 Angiv en hændelse for adfærden.

Når handlingen er anvendt, kan du gå tilbage og angive, hvilken hændelse der skal udløse handlingen. Som standard anvender Dreamweaver hændelsen OnMouseOver, når du bruger handlingen Skift billede, men du kan ændre denne hændelse til enhver tilgængelig, såsom OnClick, hvilket kræver, at brugeren klikker på billedet for at udløse handlingen Skift billede.

11 Anvend yderligere adfærd.

For at anvende Swap Image-adfærden på andre billeder på en side skal du gentage trin 5-10, klikke for at vælge det billede, du vil tjene som en trigger, og derefter angive det tilsvarende billede, der skal byttes.

12Test dit arbejde i en browser.

Du kan ikke se virkningerne af adfærd som denne, før du klikker på knappen Live view øverst til venstre i arbejdsområdet i Dreamweaver eller får vist din side i en webbrowser.