Hoe u swaps maakt met meerdere afbeeldingen in Dreamweaver - dummies

Voordat u begint met het maken van een complexer paginaontwerp met het Swap Image-gedrag van Dreamweaver, bekijkt u een voltooide pagina. Met de functie Afbeelding wisselen kunt u een of alle afbeeldingen op een pagina vervangen.

Wanneer u het gedrag Afbeelding wisselen gebruikt, is het belangrijk om alle afbeeldingen te maken die u van dezelfde grootte (hoogte en breedte) zult wisselen Als de afbeeldingen niet dezelfde grootte hebben, worden alle afbeeldingen, behalve de eerste, uitgerekt of gecomprimeerd om te passen op de ruimte die is ingenomen door de eerste afbeelding die op de pagina is ingevoegd.

Als u het gedrag Afbeelding verwisselen gebruikt met een reeks afbeeldingen die niet allemaal even hoog en breed zijn, hebt u enkele opties:

Snijd de grotere bij elkaar zodat alle afbeeldingen dezelfde grootte hebben.

Maak horizontale en verticale afbeeldingen dezelfde ruimte in uw ontwerp door twee verticale afbeeldingen te combineren voor elke horizontale afbeelding. Maak eenvoudig een bestand in een programma zoals Photoshop, voeg twee verticale afbeeldingen naast elkaar in hetzelfde bestand in en vervolgens wordt de afbeelding zo aangepast dat het bestand hetzelfde formaat heeft als een horizontale afbeelding.

Maak één afbeeldingsbestand ter grootte van uw grootste afbeelding, plaats de achtergrond in een neutrale kleur, zoals zwart of wit, en plaats vervolgens alle andere afbeeldingen op de achtergrond zodat u ze allemaal kunt opslaan met dezelfde bestandsgrootte.

Volg deze stappen om het gedrag Afbeelding wisselen te gebruiken:

1 Maak een paginaontwerp met alle afbeeldingen die u in eerste instantie wilt weergeven.

Elk van de drie foto's in het paginaontwerp voor de Tower Bridge in Londen heeft twee exemplaren: één miniatuur en één grotere versie. Wanneer de pagina voor het eerst wordt geladen in een webbrowser, worden alle drie de miniatuurafbeeldingen onderaan de pagina geplaatst, waarbij de eerste van de overeenkomstige grotere versies wordt weergegeven in het hoofdgebied net boven de miniaturen.

2Naam uw afbeeldingen in de eigenschappencontrole.

Als u uw afbeeldingen wilt targeten met JavaScript, en dit is hoe gedrag werkt, moet u elke afbeelding eerst een uniek ID geven. De afbeeldings-ID is niet hetzelfde als de afbeeldingsbestandsnaam of de teksttag, hoewel u dezelfde of soortgelijke namen kunt gebruiken. Beeld-ID's mogen geen spaties of speciale tekens bevatten.

3Kies venster → Gedrag.

Het paneel Behaviors wordt geopend. U kunt het paneel Gedrag elders op de pagina slepen en u kunt het uitklappen door de onderkant of zijkant ervan te slepen. U kunt ook andere open panelen sluiten om meer ruimte te maken door op de donkergrijze balk boven aan een paneel te klikken.

4Selecteer een afbeelding.

Selecteer de afbeelding op de pagina die als trigger voor de actie zal dienen.

5Kies het gedrag Wisselen afbeelding.

Klik met de triggerafbeelding geselecteerd in de werkruimte op het plusteken in het deelvenster Gedrag om de vervolgkeuzelijst met acties te openen en kies de actie die u wilt toepassen.

6Specify the images to swap in het dialoogvenster Afbeelding wisselen.

Selecteer in de lijst Afbeeldingen de ID voor de afbeelding die zal worden vervangen. Klik op de knop Bladeren om de afbeelding te selecteren die de hoofdafbeelding vervangt. Als de afbeelding nog niet in de lokale locatiemap is opgeslagen, biedt Dreamweaver u aan om deze voor u te kopiëren.

7 Selecteer onder in het dialoogvenster Afbeelding wisselen de optie Afbeeldingen vooraf laden om de browser opdracht te geven alle afbeeldingen in de cache te laden wanneer de pagina is geladen.

Als u deze optie niet selecteert, kan er een vertraging optreden wanneer de beeldswap wordt gebruikt.

8 Schakel de optie Images On OnMouseOut herstellen uit als u dat wilt.

De optie Restore Images OnMouseOut betekent dat wanneer een gebeurtenis is voltooid (bijvoorbeeld wanneer de muis van de activeringsminiatuur wordt verplaatst), de originele afbeelding wordt vervangen. Standaard kiest Dreamweaver vooraf deze optie voor het gedrag Wisselen van afbeeldingen. U kunt deze optie deselecteren als u merkt dat het vervangen van de originele afbeelding elke keer dat u de cursor over een andere miniatuur beweegt, storend werkt.

9Nadat u alle instellingen voor het gedrag hebt opgegeven, klikt u op OK.

Het nieuwe gedrag verschijnt in het paneel Gedrag.

10Specificeer een gebeurtenis voor het gedrag.

Nadat de actie is toegepast, kunt u teruggaan en opgeven welke gebeurtenis de actie activeert. Standaard past Dreamweaver de OnMouseOver -gebeurtenis toe wanneer u de actie Afbeelding wisselen gebruikt, maar u kunt die gebeurtenis wijzigen in een beschikbare gebeurtenis, zoals OnClick, waarvoor de gebruiker op de afbeelding moet klikken om de actie Afbeelding wisselen te activeren.

11Gebruik extra gedrag.

Om het gedrag Afbeelding wisselen toe te passen op andere afbeeldingen op een pagina, herhaalt u de stappen 5-10, klikt u om de afbeelding te selecteren die u als activering wilt gebruiken en geeft u de overeenkomende afbeelding op die moet worden verwisseld.

12Test uw werk in een browser.

U kunt de effecten van gedragingen zoals deze niet zien totdat u op de knop Liveweergave linksboven in de werkruimte in Dreamweaver klikt of een voorbeeld van uw pagina bekijkt in een webbrowser.