Hoe u een eenvoudig rolloverbeeld maakt in Dreamweaver - dummies

Rollovers zijn zo'n populaire functie dat Dreamweaver een speciaal dialoogvenster bevat voor rollovers: het dialoogvenster Rollover-afbeelding invoegen. Rollover-afbeeldingen zijn, zoals de naam al aangeeft, ontworpen om te reageren wanneer iemand een cursor over een afbeelding beweegt. 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.

U kunt complexere rollover-beeldeffecten maken met de optie Afbeelding wisselen in het paneel Gedrag. Met de optie Afbeelding wisselen kunt u meerdere afbeeldingen tegelijkertijd wijzigen.

Ga als volgt te werk om een ​​eenvoudig rollover-effect te maken met twee afbeeldingen met het invoegvel Afbeelding invoegen van Dreamweaver:

1. Plaats de cursor op de pagina waar u 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 ziet u vreemde schaaleffecten omdat beide afbeeldingen in exact dezelfde ruimte op de pagina moeten worden weergegeven.

2. Kies Invoegen → Afbeelding → Rollover-afbeelding.

   U kunt ook de vervolgkeuzelijst gebruiken die beschikbaar is via het pictogram Afbeeldingen in het deelvenster Algemeen invoegen en selecteer Rollover-afbeelding.

   Het dialoogvenster Rollover-afbeelding invoegen verschijnt.

   

3. Geef uw afbeelding een naam 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 uw lokale locatiemap bevinden, kopieert Dreamweaver ze naar uw site wanneer u de rollover maakt.

5. Voer in het vakje Rollover-afbeelding de afbeelding in die zichtbaar moet worden wanneer een bezoeker de cursor over de eerste afbeelding beweegt.

   Nogmaals, u kunt de knop Bladeren gebruiken om de afbeelding te zoeken en te selecteren.

6. Schakel het selectievakje Vooraf laden van rollover-afbeelding 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 cursor over de oorspronkelijke afbeelding is gerold.

7. Voer in het veld Alternatieve tekst een beschrijving van de afbeeldingen in.

   Alternatieve tekst is optioneel, maar wordt aanbevolen omdat het gebruik van zoekwoorden de optimalisatie van zoekmachines kan verbeteren.Evenzo is alternatieve tekst een belangrijk onderdeel van webtoegankelijkheid, omdat deze tekst wordt voorgelezen door speciale browsers, schermlezers genoemd, die worden gebruikt door mensen die blind zijn en anderen met beperkt zicht of beperkte mobiliteit. Alternatieve tekst wordt alleen in de browser weergegeven als de afbeeldingen niet zichtbaar zijn.

8. 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 een tijdelijke aanduiding in de code.

   Het # -teken is een veelgebruikte techniek voor het maken van koppelingen die nergens naar toe verwijzen. Omdat rollover-afbeeldingen die niet linken naar een andere pagina veel geweldige toepassingen hebben, is deze techniek handig. Onthoud dat als u wilt dat uw rollover linkt, u het # -teken moet vervangen door een link naar een andere pagina.

9. Klik op OK.

   De afbeeldingen worden automatisch ingesteld als rollover.

10. Als u de rollover in actie wilt zien, slaat u het bestand op en klikt u vervolgens op het wereldbolpictogram boven aan de werkruimte om een ​​voorbeeld van uw pagina in een webbrowser weer te geven.

U kunt zien hoe uw rollover werkt in de ontwerpweergave van Dreamweaver of met de optie Live view. Wanneer u op de knop Live linksboven in de werkruimte klikt, wordt Dreamweaver in feite een webbrowser die pagina's weergeeft zoals de Chrome-browser.

Wanneer u een voorbeeld van een pagina op uw computer bekijkt die een rollover-afbeelding bevat, wordt in sommige webbrowsers een waarschuwing weergegeven waarin staat dat ActiveX-besturingselementen de pagina moeten kunnen bekijken. Dit is een beveiligingswaarschuwing die alleen wordt weergegeven als de pagina wordt geopend op dezelfde computer waarop de pagina is opgeslagen.

Als u de pagina naar een webserver publiceert en deze vervolgens via een internetverbinding bekijkt, zien u en de bezoekers van uw site deze fout niet.

Credit: Artwork door istockphoto. nl