Slik aktiverer og deaktiverer en Music bilde i Javascript

Slik aktiverer og deaktiverer en Music bilde i Javascript


Javascript er et skriptspråk som kan inkluderes i en webside, kjører i en nettleser og kan nås etter Web siden lastes. Disse funksjonene gjør Javascript ideell for å legge til interaktivitet til en nettside designelementer, slik at de kan gi svar basert på brukerens handlinger. For eksempel anta at når en bruker plasserer markøren over et bilde, bør en musikkfil spille. Denne type dynamisk interaksjon kan implementeres ved hjelp av Javascript.

Bruksanvisning

1 Bruk nettleseren til å åpne en søkemotor og søk etter et gratis bilde (JPEG) som skal brukes i din webside. Last ned bildet og lagre det. I tillegg søker etter en gratis lydfil (mp3) og laste ned filen til samme sted.

2 Opprett en ny fil i en teksteditor kalt "imagesound.htm" og lagre den. Denne filen vil inneholde bilde og lyd, samt Javascript-funksjoner som aktiverer og deaktiverer musikk basert på brukerens handlinger. Det bør være formatert slik:

<Html>

<Head>

</ Head>

<Body>

</ Body>

</ Html>

3 Edit imagesound.htm og plassere to Javascript-funksjoner inne i "<head>" og "</ head>" koder. Den første funksjonen skal kalles når brukeren plasserer sin pekeren over bildet og den andre funksjonen skal kalles når brukeren beveger seg markøren bort fra bildet. Plasser funksjonene inne Java <script> og </ script> tags, som så:

<Html>

<Head>

<Script language = "javascript" type = "text / javascript">

funksjon enableSound (lydfil) {

}

funksjon disableSound () {

}

</ Script>

</ Head>

<Body>

</ Body>

</ Html>

4 Rediger "enableSound ()" -funksjon. Denne funksjonen tar navnet på lydfilen og bruker den til å lage en lyd-objekt. Lyden objekt er plassert i en <span> element kalt "hidden_span" bruker innerhtml eiendommen. Kodingen skal nå se slik ut:

<Html>

<Head>

<Script language = "javascript" type = "text / javascript">

funksjon enableSound (lydfil) {

document.getElementById ( 'hidden_span'). innerhtml = "<objekttype = \" audio / x-mpeg \ "data = \" "+ lydfil +" \ "width = \" 0 \ "height = \" 0 \ " skjult = \ "true \"> ";

}

funksjon disableSound () {

}

</ Script>

</ Head>

<Body>

</ Body>

</ Html>

5 Rediger "disableSound ()" -funksjon. Denne funksjonen nullstiller "hidden_span" elementets innerhtml eiendom til ingenting når den kalles. Manuset skal nå se slik ut:

<Html>

<Head>

<Script language = "javascript" type = "text / javascript">

funksjon enableSound (lydfil) {

document.getElementById ( 'hidden_span'). innerhtml = "<objekttype = \" audio / x-mpeg \ "data = \" "+ lydfil +" \ "width = \" 0 \ "height = \" 0 \ " skjult = \ "true \"> ";

}

funksjon disableSound () {

. Document.getElementById ( 'hidden_span') innerhtml = "";

}

</ Script>

</ Head>

<Body>

</ Body>

</ Html>

6 Legg den nedlastede bilde til imagesound.htm ved hjelp av instruksjons. Sett inn koden for å ringe "enableSound ()" og "disableSound ()" funksjoner ved hjelp av "onMouseOver" hendelse å kalle "enableSound ()" og "onmouseout" hendelse å kalle "disableSound ()." Bruk navnet på den nedlastede lyd når du kaller "enableSound ()", slik:

<Html>

<Head>

<Script language = "javascript" type = "text / javascript">

funksjon enableSound (lydfil) {

document.getElementById ( 'hidden_span'). innerhtml = "<objekttype = \" audio / x-mpeg \ "data = \" "+ lydfil +" \ "width = \" 0 \ "height = \" 0 \ " skjult = \ "true \"> ";

}

funksjon disableSound () {

. Document.getElementById ( 'hidden_span') innerhtml = "";

}

</ Script>

</ Head>

<Body>

<Img onMouseOver = "enableSound ( 'my_mp3.mp3')" onmouseout = "disableSound ()">

</ Body>

</ Html>

7 Legg en "<span>" element til imagesound.htm. Plasser element under bildet og identifisere den med id " 'hidden_span'."

<Html>

<Head>

<Script language = "javascript" type = "text / javascript">

funksjon enableSound (lydfil) {

document.getElementById ( 'hidden_span'). innerhtml = "<objekttype = \" audio / x-mpeg \ "data = \" "+ lydfil +" \ "width = \" 0 \ "height = \" 0 \ " skjult = \ "true \"> ";

}

funksjon disableSound () {

. Document.getElementById ( 'hidden_span') innerhtml = "";

}

</ Script>

</ Head>

<Body>

<Img onMouseOver = "enableSound ( 'my_mp3.mp3')" onmouseout = "disableSound ()">

<Span id = 'hidden_span'> </ span>

</ Body>

</ Html>

8 Lagre "imagesound.htm" til samme sted som lyd- og bildefiler. Åpne imagesound.htm i en nettleser og bruke markøren til å aktivere og deaktivere musikkfilen.

Hint

  • Gi tekst i HTML-siden slik at brukerne vet at å plassere sin pekeren over bildet vil utløse en lyd slik at de vet hva som venter.
  • Det er en god idé å la brukerne styre handlingene de tar, spesielt med atferd som lyd. Tenk utløser lyden på et museklikk i stedet for på en mus over hendelsen, eller gi en knapp.
  • Selv om innerhtml funksjonen er mye brukt, er det ikke anses som del av W3C DOM.