Afbeelding Rollovers in Adobe CS5 Dreamweaver - dummies

In Dreamweaver van Adobe Creative Suite 5 (Adobe CS5) kunt u afbeeldingsobjecten invoegen, inclusief tijdelijke aanduidingen voor afbeeldingen, rollover-afbeeldingen (afbeeldingen die veranderen wanneer een kijker de muisaanwijzer over de afbeelding beweegt), navigatiebalken, en Fireworks HTML. U opent deze afbeeldingsobjecten door Invoegen → Afbeeldingobjecten te kiezen.

1 Maak de afbeeldingen die moeten worden gebruikt als rollover.

U kunt deze afbeeldingen genereren in Fireworks, Illustrator, Photoshop of elke andere toepassing waarmee u afbeeldingen kunt opslaan die zijn geoptimaliseerd voor internet.

2Plaats de cursor op de pagina waar u de rollover wilt laten verschijnen.

Kies Invoegen → Afbeeldingobjecten → Rollover afbeelding of klik op de knop Afbeelding omdraaien in het paneel Invoegen. Het dialoogvenster Rollover-afbeelding invoegen.

3Noem de afbeelding.

Typ een afbeeldingsnaam zonder spaties in het tekstveld Afbeeldingsnaam. Deze naam wordt gebruikt in het script dat de rollover maakt.

4Klik op de bladerknoppen.

De knop Bladeren bevindt zich rechts van de tekstvelden Originele afbeelding en Rollover-afbeelding. Zoek de afbeelding die u standaard op de pagina wilt weergeven en de afbeelding die alleen wordt weergegeven wanneer iemand met de muis over de afbeelding beweegt.

5 Schakel het selectievakje Voorafgaande rolrolafbeelding uit geselecteerd.

Deze optie downloadt de rollover-afbeelding wanneer de pagina wordt gedownload om vertragingen in rollovers te voorkomen.

6Beschrijf de afbeelding.

Typ de juiste beschrijvende alt-tekst in het veld Alt-tekst.

7Voltooi het tekstvak Wanneer u klikt, ga naar URL.

Hiermee wordt Dreamweaver geleid waar kijkers worden geleid wanneer ze op de rollover-afbeelding klikken. U kunt op de knop Bladeren klikken om een ​​andere pagina op uw site te zoeken of een URL in te voeren. Opmerking: als u een koppeling naar een andere website maakt, moet u het voorvoegsel // aan het begin van de URL toevoegen.

Als u nog geen echte koppeling voor een knop of hyperlink heeft, kunt u een hekje (#) invoeren om een ​​dode link te maken. De link of knop lijkt klikbaar maar gaat nergens heen als erop wordt geklikt. Deze optie is beter dan op de spatiebalk te drukken om een ​​lege ruimte als een koppeling te maken, omdat een pagina niet gevonden fout wordt weergegeven wanneer erop wordt geklikt.

8Klik op OK.

De rolloverafbeelding wordt op de pagina gemaakt.

9Bekijk de afbeelding.

Als u een voorbeeld van de nieuwe rolloverafbeelding wilt weergeven, kiest u Bestand → Voorvertoning in browser of klikt u op de knop Liveweergave op de werkbalk Document.