onmouseover alternativer

April 19

Ved hjelp av HTML og Javascript-kode, kan utviklere lage interaktive effekter på websider. HTML-elementer for en side kan inkludere hendelsen lytter attributter som gjenkjenner brukerinteraksjon med musa, som å flytte den over et bestemt element. Når en slik hendelse skjer, kan brukerens nettleser kalle en Javascript-funksjon. Javascript-funksjonen kan implementere en effekt som å endre utseende på elementet mens brukerens musen svever over det.

HTML Markup

Den "onmouseover" funksjonen er aktivert når brukere ruller musen over et HTML-element. Følgende eksempel markup kode demonstrerer:
<Div id = "contentElem" onmouseover = "onElement (this.id)"> Her er element innhold </ div>

Dette ber brukerens nettleser for å spore brukeren beveger musepekeren over elementet. Når dette skjer, utfører leseren den angitte Javascript-funksjonen, passerer ID-attributtet verdien av elementet som en parameter. Dette gjør funksjonen for å identifisere elementet innenfor siden som en helhet, slik at den kan gjennomføre en visuell effekt.

Javascript-funksjoner

Javascript-funksjonen er angitt som HTML-elementet hendelsen attributt kan inngå i hodet delen av websiden eller i et eget script. Følgende eksempelkode demonstrerer funksjonen disposisjon innenfor siden hodet:
<Head>
<Script type = "text / javascript">
funksjon onElement (theElement) {
// Funksjon implementering
}
</ Script>
</ Head>

For å referere til en funksjon i en egen script-filen, kan følgende kode vises, også i hodedelen:
<Script type = "text / javascript" src = "myfunctioncode.js"> </ script>

I dette tilfellet, er skriptet i samme katalog som den websiden. Innenfor skriptet, kan funksjonen omrisset inngå direkte, som følger:
funksjon onElement (theElement) {
// Funksjon implementering
}

funksjon innhold

Innholdet av en "onmouseover" funksjon vil naturligvis avhenge av formålet. Følgende eksempelkode demonstrerer en mulig implementering:
document.getElementById (theElement) .style.color = "# FF0000";

Denne koden får først en referanse til elementet ved hjelp av sin passert ID attributtverdi. Når den har en referanse til elementet, kan funksjonen bruk endringer i den. I dette tilfellet, endres ganske enkelt tekstfargen av elementet innhold. Mange "onmouseover" funksjoner endre element stil, men noen også endre innholdet av et element.

tilhørende funksjoner

Mange websider hvor en "onmouseover" -funksjonen leveres også implementere "onmouseout" -funksjonen. Dette gjør at utvikleren å gjenopprette HTML-elementet tilbake til sin opprinnelige tilstand når brukeren beveger musen av det. Følgende endrede HTML kode demonstrerer:
<Div id = "contentElem" onmouseover = "onElement (this.id)" onmouseout = "offElement (this.id)"> Her er element innhold </ div>

Følgende tilleggsJavaScript-funksjonen fungerer sammen med dette:
funksjon offElement (theElement) {
document.getElementById (theElement) .style.color = "# 000000";
}

Dette kan være nyttig hvis elementet opprinnelig hadde svart tekst. Hvis "onmouseover" -funksjonen endret element innhold, kan det gjenopprette det opprinnelige innholdet her.