Hoe maak ik een Image Rollover in Dreamweaver CS3

Hoe maak ik een Image Rollover in Dreamweaver CS3


U kunt gebruik maken rollover afbeeldingen op uw webpagina's om interactiviteit te verhogen, en de aandacht van de gebruiker om gebieden van belang, zoals een afbeelding gebruikt als een knop. Een visuele rollover effect bevestigt aan de gebruiker dat het beeld is interactief, en zal een actie uit te voeren wanneer erop wordt geklikt. Vaak Webdesigners toevoegen 3D-effecten op de knop de illusie van diepte te geven wanneer ingedrukt, of een hoogtepunt rond de knoppen rand. Hoewel rolloverafbeeldingen de gebruikerservaring te verbeteren, is het belangrijk om niet overboord te gaan en ze te gebruiken alleen wanneer dat nodig is, of dat ze snel hun effect verliezen.

instructies

1 Lancering Adobe Dreamweaver CS3, en klik vervolgens op het menu "Bestand" en selecteer "Nieuw." Dubbelklik op "HTML" in het menu "Pagina type" om een ​​nieuwe HTML-pagina te openen.

2 Klik op de locatie waar u de rollover-afbeelding toegevoegd met behulp van Dreamweaver de code of het ontwerp te bekijken. Klik op het menu "Invoegen" en klik vervolgens op "Image Objects" en "Rollover Image."

3 Typ een unieke naam voor het beeld in het "Beeld naam" doos. Klik op de knop "Browse" naast de "Origineel beeld" in om de locatie van de oorspronkelijke beeld te selecteren om te laten zien. Klik op de knop 'Bladeren' naast de 'afbeelding Rollover "vak aan de locatie van de rollover van selecteren. Geef een beschrijving van de afbeelding in het vak "Alternatieve tekst 'voor gebruikers die geen afbeeldingen in hun browser kunnen zien. Klik ten slotte op de knop "Bladeren" naast het vak "Ga naar URL" om de pagina waarop u de gebruiker zal doorsturen naar nadat ze de afbeelding klikt selecteren.

4 Klik op de knop "OK" om de rollover-afbeelding invoegen. Dreamweaver voegt automatisch de HTML en JavaScript-code voor de afbeelding rollover.

5 Sla de pagina en uploaden naar uw webserver. Je moet ook de gewenste bestanden kunnen uploaden voor de rollover. Open de pagina in de webbrowser en u zult zien de oorspronkelijke afbeelding weergegeven. Beweeg de muis over de afbeelding om de rollover-afbeelding te zien, en klik dan op de afbeelding om naar de gelinkte pagina.

Hints

  • Dreamweaver CS3 voegt het JavaScript nodig zijn voor het imago rollover in de kop van de pagina. Aangezien deze code vaak is vereist op meerdere pagina's, kunt u knippen en plakken de JavaScript in een extern bestand te versnellen pagina laadtijden.
  • Houd de bestandsgrootte van rollover afbeeldingen klein, zoals u wilt plaatsen twee beelden in plaats van één, die zal toevoegen aan de laadtijd van de pagina.