Video: Rollover images and image maps in Adobe Dreamweaver 2024
In Dreamweaver, afbeeldingen met de muis overzetten - zoals de naam al aangeeft - zijn ontworpen om te reageren wanneer iemand een cursor over een afbeelding gooit. Het effect kan net zo dramatisch zijn als een foto van een hond die wordt vervangen door een afbeelding van een leeuw, of zo subtiel als de kleur van een woord dat verandert terwijl het ene beeld het andere vervangt. Hoe dan ook, Dreamweaver bevat een speciaal dialoogvenster voor rollovers dat het maken van een eenvoudig rollover-effect tot een van de eenvoudigste toe te passen gedragingen maakt.
Ga als volgt te werk om een rollover-afbeelding te maken met behulp van Dreamweaver's Insert Image Rollover-dialoogvenster:
1. Klik om je cursor op de pagina te plaatsen waar je de rollover wilt laten verschijnen.
Rollovereffecten vereisen ten minste twee afbeeldingen: één voor de beginstatus en één voor de rollover-status. U kunt twee verschillende afbeeldingen of twee vergelijkbare afbeeldingen gebruiken, maar beide moeten dezelfde afmetingen hebben. Anders krijg je vreemde schaaleffecten omdat beide afbeeldingen in exact dezelfde ruimte op de pagina moeten worden weergegeven.
2. Kies Insert -> Image Objects -> Rollover Image.
Het dialoogvenster Rollover-afbeelding invoegen verschijnt.
3. Typ uw afbeelding in het vak Afbeeldingnaam.
Voordat u een gedrag op een element kunt toepassen, zoals een afbeelding, moet het element een naam hebben zodat het gedragsscript ernaar kan verwijzen. Je kunt elementen een naam geven die je maar wilt, zolang je geen spaties of speciale tekens gebruikt.
4. Geef in het vak Originele afbeelding de eerste afbeelding op die u zichtbaar wilt maken. Gebruik de knop Bladeren om de afbeelding te zoeken en te selecteren.
Als de afbeeldingen zich nog niet in de hoofdmap van uw site bevinden, kopieert Dreamweaver ze naar uw site wanneer u de rollover maakt.
5. Voer in het vak Rollover afbeelding de afbeelding in die zichtbaar moet worden wanneer bezoekers hun cursor over de eerste afbeelding bewegen.
Nogmaals, u kunt de knop Bladeren gebruiken om de afbeelding te zoeken en te selecteren.
6. Schakel het selectievakje Preload Rollover Image in om alle rollover-afbeeldingen in de cache van de browser te laden wanneer de pagina voor het eerst wordt geladen.
Als u deze stap niet wilt uitvoeren, kunnen uw bezoekers een vertraging ondervinden omdat de tweede afbeelding pas wordt gedownload als een muis over de oorspronkelijke afbeelding is gerold.
7. Voer in het vak Wanneer geklikt, Ga naar URL een webadres in of blader naar een andere pagina op uw site waarnaar u een koppeling wilt maken.
Als u geen URL opgeeft, voegt Dreamweaver automatisch het # -teken in als tijdelijke aanduiding.
8. Klik OK.
De afbeeldingen worden automatisch ingesteld als rollover.
9. Klik op het wereldbolpictogram boven in de werkruimte om een voorbeeld van uw werk in een browser te bekijken en te testen hoe de rollover werkt.
