Zelfstudie voor het maken van een rollover-afbeelding in Dreamweaver

Een rollover-afbeelding is een afbeelding die in een andere afbeelding verandert wanneer u of uw klant de muis erover beweegt. Deze worden meestal gebruikt om een ​​interactief gevoel te creëren, zoals knoppen of tabbladen. Maar u kunt vanuit bijna alles nieuwe afbeeldingen maken.

Deze zelfstudie is bedoeld om u te helpen bij het maken van een rollover-afbeelding in Dreamweaver. Het is bedoeld voor gebruik door mensen die de volgende versies van Dreamweaver gebruiken:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Vereisten voor deze zelfstudie

• DreamweaverEen van de hierboven genoemde versies.
• Een origineel beeldZorg dat je deze afbeelding optimaliseert. Hierdoor worden uw pagina's sneller geladen.
• De rollover-afbeeldingDeze afbeelding moet dezelfde afmetingen hebben als de originele afbeelding. En, net als de originele afbeelding, moet worden geoptimaliseerd om pagina laadtijden te helpen.
• Een webpaginaDit is de HTML-pagina waar u uw rollover-afbeelding plaatst.

Begin

1. Start Dreamweaver
2. Open de webpagina waar u uw rollover wilt hebben

Voeg een rollover-beeldobject in

Met Dreamweaver kunt u eenvoudig een rollover-afbeelding maken.

1. Ga naar het menu Invoegen en naar beneden naar de Beeldobjecten sub-menu.
2. kiezen Afbeelding rollover of Rollover afbeelding.

Sommige oudere versies van Dreamweaver noemen de 'interactieve afbeeldingen' van de afbeeldingsobjecten in plaats daarvan.

Vertel Dreamweaver welke afbeeldingen moeten worden gebruikt

Dreamweaver opent een dialoogvenster met de velden die u moet invullen om uw rollover-afbeelding te maken.

Afbeeldingsnaam

Kies een afbeeldingnaam die uniek is voor de pagina. Het moet allemaal één woord zijn, maar u kunt getallen, onderstrepingstekens (_) en koppeltekens (-) gebruiken. Dit wordt gebruikt om het te wijzigen beeld te identificeren.

Originele foto

Dit is de URL of locatie van de afbeelding die op de pagina begint. U kunt relatieve of absolute pad-URL's in dit veld gebruiken. Dit moet een afbeelding zijn die op uw webserver staat of die u met de pagina uploadt.

Rollover afbeelding

Dit is de afbeelding die verschijnt wanneer u met de muis over de afbeelding beweegt. Net als bij de originele afbeelding, kan dit een absoluut of relatief pad naar de afbeelding zijn en moet deze bestaan ​​of worden geüpload wanneer u de pagina uploadt.

Preload rollover-afbeelding

Deze optie is standaard geselecteerd omdat het helpt om de rollover sneller te laten verschijnen. Door ervoor te kiezen om de rollover-afbeelding vooraf te laden, slaat de webbrowser deze op in een cache totdat de muis eroverheen rolt.

Alternatieve tekst

Goede alternatieve tekst maakt uw afbeeldingen toegankelijker. Gebruik altijd een soort alternatieve tekst bij het toevoegen van afbeeldingen.

Wanneer geklikt, ga naar URL

De meeste mensen klikken op een afbeelding wanneer ze er een op een pagina zien. Dus je zou de gewoonte moeten hebben om ze klikbaar te maken. Met deze optie kunt u de pagina of URL opgeven om de kijker te laten zien wanneer ze op de afbeelding klikken. Maar deze optie is niet vereist om een ​​rollover te maken.

Als u alle velden hebt ingevuld, klikt u op OK om Dreamweaver uw rollover-afbeelding te laten maken.

Dreamweaver schrijft het JavaScript voor u

Als u de pagina opent in de codeweergave ziet u dat Dreamweaver een JavaScript-blok invoegt in de van uw HTML-document. Dit blok bevat de 3 functies die u nodig hebt om de afbeeldingen te laten wisselen wanneer de muis eroverheen rolt en de voorspanningsfunctie als u daarvoor hebt gekozen.

functie MM_swapImgRestore ()functie MM_findObj (n, d)functie MM_swapImage ()functie MM_preloadImages ()

Dreamweaver Hiermee voegt u de HTML-code voor de rollover toe

Als u ervoor kiest Dreamweaver vooraf de rollover-afbeeldingen te laten laden, ziet u de HTML-code in de hoofdtekst van uw document om het preload-script te bellen, zodat uw afbeeldingen sneller laden.

onload = "MM_preloadImages (shasta2.jpg)"

Dreamweaver voegt ook alle code voor uw afbeelding toe en koppelt deze (als u een URL hebt opgenomen). Het rollover-gedeelte wordt toegevoegd aan de ankertag als onmouseover en onmouseout-kenmerken.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"

Test de rollover

Bekijk de volledig functionele rollover-afbeelding en ontdek wat Shasta denkt.