Hoe te Animated Rollover toetsen Maken

Hoe te Animated Rollover toetsen Maken


Animated rollover knoppen veranderen van kleur, grootte en zelfs transparantie wanneer je rolt de muis over hen. Rollovers creëren van een bekende animatie-effect dat veel webgebruikers zijn gaan verwachten wanneer zweefde over een knop. Rollover-afbeeldingen kan ook informatieve feedback aan een gebruiker. Zo kan de kleur van een knop veranderen naar rood wanneer je op het punt om erop klikken om een ​​kritische taak uit te voeren zijn. Er zijn meerdere manieren om geanimeerde button rollover effecten te creëren. Als u niet wilt dat JavaScript code te schrijven, het genereren van de effecten met behulp van HTML.

instructies

Maak de knoppen

1 Open een foto-editor en een nieuw bestand te maken. Noem het bestand "voor rollover."

2 Gebruik de ellips of rechthoek tools waarmee u een knop vorm te tekenen.

3 Solliciteer bevel effecten op de vorm eruit ziet als een knop te maken. Voeg tekst aan de knop als u de knop om een ​​tekst label hebben.

4 Sla de afbeelding op als GIF-bestand. Webdesigners meestal gebruik van het GIF-formaat bij het maken van kleine afbeeldingen.

5 Kopieer de afbeelding en plak deze in een nieuw bestand. Noem dit bestand "rollover_button2." De browser zal dit beeld weer te geven wanneer u met de muis over de knop.

6 Selecteer de knop en verander de kleur door het aanpassen van de tint en verzadiging van de afbeelding. Zie de documentatie die meegeleverd wordt met uw foto-editor voor meer informatie.

7 Breng een schaduw effect op de knop als willen het 3D-effect te versterken.

8 Verander de tekst van de knop als je de knop wilt andere tekst wanneer de muis over de afbeelding weer te geven.

9 Bewaar deze afbeelding als een GIF-bestand.

10 Bewaar een kopie van beide afbeeldingen in een formaat afkomstig uit het beeldbewerkingsprogramma. Photoshop, bijvoorbeeld, heeft een eigen formaat van .psd. Paint.Net heeft een eigen indeling van PDN. Controleer het Help-bestand dat wordt geleverd met uw programma om de oorspronkelijke beeldformaat te bepalen. Door het creëren van kopieën met dit formaat, vindt u het gemakkelijker om wijzigingen aan de afbeeldingen te maken als u besluit om ze later te werken.

Maak de HTML

11 Maak een nieuw HTML-bestand.

12 Voeg deze code toe aan het hoofdgedeelte van het bestand:

<Img src id = "rolloverTest" src = "before_roller.gif"
onmouseover = "document.images [0] .src = 'before_rollover.gif';"
onmouseout = "document.images [0] .src = 'after_rollover.gif'>

De onmouseover evenement zal het de before_rollover weergegeven wanneer u met de muis zweeft plaatst over de afbeelding. De onmouseout evenement zal het de after_rollover weergegeven wanneer de muis het beeld verlaat. De src parameter waarden overeenkomen met de namen van de knop foto's die u hebt gemaakt.

13 Upload alle bestanden naar uw website en test de geanimeerde rollover-effect.

Hints

  • Call JavaScript-functies als u wilt complexe rollover animaties (zie bronnen) te creëren. JavaScript-functies geven u de mogelijkheid om muisgebeurtenissen onderscheppen en gelden aangepaste CSS styling aan de knoppen.