Hvordan endre et bilde i Javascript for Firefox
Javascript er et populært klient-side skriptspråk, noe som betyr at den kjører på nettstedet besøkendes nettleser. Javascript forbedrer web side innhold ved å legge til dynamisk funksjonalitet som reagerer på brukerhandlinger. Firefox er en populær gratis open-source nettleser program, foretrukket av mange brukere for sin avanserte sikkerhet, tidlig adopsjon av faner og mange tilgjengelige utvidelser og plugins. Skrive Javascript-kode som er kompatibel med de bredt aksepterte W3C standarder sikrer at koden vil være bærbare og støtte mange nettlesere, inkludert Firefox.
Bruksanvisning
1 Endre et bilde med Javascript ved å identifisere det bildet du ønsker å erstatte og deretter dynamisk endring av "src" egenskap av HTML-elementet, som angir bildets kildefilen.
Inkluder en "id" attributt i "img" tag for bildet du ønsker å endre. Når du skriver HTML for nettsiden din, vil du opprette kode som dette:
<Img src = "images / lukket box.jpg" alt = "bilde av en boks" title = "My Favorite Pakking Crate" id = "switchablePic" />
Implementere en hendelse nyttefunksjon for å håndtere hendelser, slik som tilfelle brann når siden er ferdig lasting og hendelsene som ild når musepekeren beveges over eller tilbake ut av bildet. Det finnes en rekke svært nyttige funksjoner tilgjengelig på Internett som du kan bruke (se Ressurser). For dette eksempelet, forestill deg at du bruker addEvent funksjonen skrevet av Dean Edwards. Denne funksjonen tar tre argumenter: objektet element som arrangementet skal festes, arrangementet som vil bli håndtert og navnet på den funksjonen som vil håndtere hendelsen. Bruk den til å initialisere bildet koblingsfunksjoner når siden lasthendelses branner.
addEvent (vindu, "last", initializeRollover);
Fest mouse og mouseout hendelser til \ "switchablePic \" image. Når disse hendelsene utløst, vil de utløse funksjoner som bytter bildets kilde. Tving nettleseren til å forhåndslaste roll bilde ved å definere det som et nytt bilde objekt; Dette hindrer en forsinkelseseffekten som noen ganger oppstår når bildekilden er slått før erstatnings bildet er ferdig lastet.
fungere initializeRollover () {
// Fest hendelsen lyttere
Var bilde = document.getElementById ( 'switchablePic')
GÅ
addEvent (bilde, 'mouse', rollover)
GÅ
addEvent (bilde, 'mouseout', utrulling)
GÅ
// Preload roll bildet inn i nettleseren
Var replacementImageSource = 'images / åpen box.jpg'
GÅ
Var img = new Image ()
GÅ
img.src = replacementImageSource
GÅ
}
4 Lag en rollover funksjon som endrer kildefilen til bildet fra et bilde av en lukket boks til et bilde av en åpen boks. En velskrevet addEvent funksjon lar deg benytte "dette" søkeord for å raskt og enkelt referere til objektet som kalles funksjonen.
funksjon roll () {
this.src = 'images / open-box.jpg'
GÅ
}
5 Implementere en utrulling funksjon som slår kildefilen tilbake til bildet av en lukket boks når musepekeren forlater bildet.
funksjon utrulling () {
this.src = 'images / lukket-box.jpg'
GÅ
}
6 Pakk skriptet i en HTML-skript element og ta den med i HTML hodet av dokumentet, sammen med en link til arrangementet håndtering funksjon av ditt valg.
<Script type = \ "text / javascript" src = \ "inkluderer / events.js"> </ script>
<Script type = \ "text / javascript">
// Skriptet går her
</ Script>
Vis siden i Firefox nettleseren for å teste skriptet. Bildet vil bytte til sin erstatning når du holder musepekeren over det; og det vil slå tilbake når du fjerner musepekeren.