Hvordan lage animert Roll Knapper

Hvordan lage animert Roll Knapper


Animerte roll knappene endrer farge, størrelse og selv åpenhet når du ruller musen over dem. Velt skape en kjent animasjon effekt at mange nettbrukere har kommet til å forvente når svever over en knapp. Roll bilder kan også gi informativ tilbakemelding til en bruker. For eksempel kan en knapp farge skifte til rødt når du er i ferd med å klikke den for å utføre en kritisk oppgave. Det er flere måter å lage animerte knapp rollover effekter. Hvis du ikke ønsker å skrive Javascript-kode, generere effekten ved hjelp av HTML.

Bruksanvisning

Opprett knappene

1 Åpne et bilderedigeringsprogram og opprette en ny fil. Gi filen navnet "før rollover".

2 Bruk ellipse eller rektangel verktøy for å tegne en knapp form.

3 Påfør bevel effekter for å gjøre figuren ser ut som en knapp. Legg tekst til knappen hvis du vil at knappen skal ha en tekst etikett.

4 Lagre bildet som GIF-fil. Webdesignere vanligvis bruker GIF-format når du lager små bilder.

5 Kopier bildet og lime det inn i en ny fil. Navn denne filen "rollover_button2." Nettleseren vil vise dette bildet når du beveger musen over knappen.

6 Velg knappen og endre farge ved å justere bildets fargetone og metning. Se dokumentasjonen som fulgte med bilderedigeringsprogram for detaljer.

7 Påfør en skygge effekt til knappen hvis du ønsker å forbedre 3D-effekten.

8 Endre knappen tekst hvis du vil at knappen for å vise forskjellig tekst når musen ruller over bildet.

9 Lagre dette bildet som en GIF-fil.

10 Lagre kopier av både bilder i et format innfødt til bilderedigeringsprogram. Photoshop, for eksempel, har en innfødt formatet psd. Paint.Net har en innfødt format av PDN. Sjekk hjelpefilen som følger med programmet for å finne ut det opprinnelige bildeformatet. Ved å opprette kopier med dette formatet, vil du finne det lettere å gjøre endringer i bildene hvis du bestemmer deg for å oppdatere dem senere.

Lag HTML

11 Opprett en ny HTML-fil.

12 Legg denne koden til kroppen delen av filen:

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

Den onmouseover arrangementet vil vise before_rollover bildet når du plasserer musen svever over bildet. Den onmouseout Arrangementet vil vise after_rollover bildet når musen forlater bildet. De src parameterverdier samsvarer med navnene på knappen bildene du har opprettet.

1. 3 Last opp alle filene til ditt nettsted og teste den animerte roll effekt.

Hint

  • Ring Javascript-funksjoner hvis du ønsker å lage komplekse roll animasjoner (se Ressurser). Javascript-funksjoner gir deg muligheten til å fange opp mus hendelser og bruke tilpassede CSS styling til knappene.