Javascript mouse Button Effects

Hvis du noensinne har sett på en knapp på en nettside som endrer formen når markøren er over det, så du har sikkert sett en "Mouse" effekt ved hjelp av javascript. Javascript må ikke forveksles med programmeringsspråket Java, er en enkel skriptspråk for websider. Muligheten for javascript for å lagre og hente variabler åpner for unike effekter når en mus svever over et element, inkludert knapper.

Den "onmouseover" attributt

Oftest er javascript engasjert av den definerende "onmouseover" innenfor en link tag.

<A href = "mysite.com" onmouseover = "

Dette attributtet faktisk vil engasjere javascript-kode du skal skrive for knappene eller kan direkte identifisere det nye bildet. Siden de fleste knappene på Web-sider er faktisk små bildefiler, kan du lage mange forskjellige effekter ved hjelp av to forskjellige bilder, ett for den vanlige knappen og den andre for "Mouse" -knappen.

Javascript integrert

I dag er mange leseren inkludere javascript-kode er nødvendig for å integrere den "onmouseover" og "onmouseout", som returnerer knappen til sin opprinnelige tilstand etter at musen har forlatt, uten noen ekstra javascript. For å oppnå dette, legger uttrykket "dokumentet. [Varenavn] .src = [sted]" etter "... over" og "... ut" attributter. Den "[varenavn]" erstattes med verdien av ID-attributtet i bildekoden du ønsker rullet over. For eksempel document.mine.would relateres til et bilde tag <img src = mypicture.jpg id = min>. Den "location" er katalogen der mouse eller mouseout fil sitter. Hvis det er samme katalog som HTML-fil der koden blir skrevet, da bare filnavnet er nødvendig.

Legge Script

Denne typen koden kan være tungvint hvis du ønsker mange rollover effekter. For å effektivisere prosessen, kan du skrive en javascript funksjon og slett kalle den funksjonen med et nummer eller strengvariabel. Plasser javascript i overskriften til HTML-fil og legge den i løpet av <script> koder. Den "funksjonen 'navn' ()" - hvor 'navn' er noe unikt navn du velger - deretter kan kalles i <A> -taggens onmouseover eller onmouseout attributter. For eksempel <A HREF="webpage.html" onmouseover="MyOver()" onmouseout="MyOut()>. " Hvis du bruker variabler, kan du lage et skript som automatisk ser på et bilde, og den tilhørende Mousetilsvarende. For eksempel kan skriptet se etter en bildefilen "[variabel] _on.jpg" når onmouseover er aktivert og "[variabel] _off.jpg" når OnMouseOff er aktivert. Så tag ville bare å ringe "onmouseover = 'myout ([variabel])'" for å bli aktivert. De tilhørende bildene ville, selvfølgelig, har å bli navngitt som "[variabel] _on.jpg" og "[variabel] _off.jpg" - "[variabel]" er selvfølgelig noe unikt tekst eller numerisk streng du velge .

Bilder roll

De velt slutt komme ned til hvordan du lage bildene for å vise knappen. Noen vanlige bivirkninger omfatter gjør teh opprinnelige knappen "glød" som du holde musepekeren over den. Eldre effekter gjort en hevet utseende knappen ser ut som om det hadde vært deprimert. Disse effektene bruke flere bilder, som er opprettet i grafikk redigering programvare. Det er viktig at alle disse bildefiler er nøyaktig samme dimensjoner, ellers websiden kan bli forvrengt på hver rollover.