Hvordan lage et bilde Roter på Mouse

January 17

Den "onMouseOver" -funksjonen (også kalt "svever") er en Javascript-hendelse som utløser en handling i brukergrensesnittet når musepekeren er plassert over et objekt. Javascript er først og fremst brukes på websider, så hendelsen endrer vanligvis noe på websiden der Javascript-koden er skrevet. Ved å bruke onMouseOver funksjon, kombinert med "roter" redskap for en online bilderedigerings nettsted, kan du opprette en roterende effekt for et bilde som utløses når brukere plasserer sine musepekeren over bildet.

Bruksanvisning

1 Start din standard nettleser og skriv inn nettadressen for en online bilderedigerings nettsted (som Pixenate, Pixlr eller LunaPic) i adressefeltet, og trykk deretter på "Enter" -tasten.

2 Last opp bildet du ønsker å rotere ved å klikke på "Velg bilde for å redigere" linken eller "Åpne bilde fra datamaskinen" -knappen. Klikk for å velge bildet, og klikk "Åpne". Klikk på "Last opp bildet" for å laste opp bildet.

3 Klikk på "Roter" verktøy på bilderedigerings verktøylinjen, eller klikk på "Image" og velg "Rotate Canvas." Klikk for å velge roteringsvinkel og innstillinger, og klikk deretter "Lagre til disk" eller "File" og deretter "Lagre". Lagre roterte bildet i samme katalog som den opprinnelige bildefilen.

4 Start din standard HTML-editor. Hvis du ikke har en standard HTML editor, klikk på "Free HTML Redaktører" linken i Resources. Opprett en ny HTML-dokument.

5 Klikk på "File" -menyen og velg "Lagre". Skriv "rotate.html" som dokumentnavnet og velge mappen som inneholder «image1" og "Image2" filer som lagringskatalogen. Klikk på "Lagre".

6 Finn "<body>" og "</ body>" koder i den nye HTML-dokumentet. Klikk for å plassere markøren mellom de to body-kodene, og trykk "Enter" for å opprette en ny linje.

7 Skriv inn følgende i den blanke linjen, erstatte "rotatedimage.gif" tekst med den roterte bildenavn og "originalimage.gif" tekst med den opprinnelige, unrotated bildenavn:

Trykk "Enter" for å opprette en ny linje.

8 Skriv inn følgende:

Trykk enter."

9 Type:

</a>

Klikk på "File" -menyen og velg "Lagre".

10 Dobbeltklikk på "rotate.html" filen for å åpne den i din standard nettleser. Holder musepekeren over bildet for å se rotasjonen effekt, deretter flytte musepekeren utenfor bildet for å se det gå tilbake til det opprinnelige, unrotated bilde.