Hvordan endre bildekilde JavaScript

JavaScript kan integrere seg med HTML for å oppfylle kravene til brukere. Ved integrasjon kan brukere bruke en funksjon for å endre bildekilden. For eksempel brukes SRC -egenskapen til å spesifisere bildekilden. Kildene kan inneholde et lokalt filsystem så vel som URL -en. Denne guiden tjener til å endre bildekildefilen ved å bruke SRC -egenskapen. Alle de nyeste nettleserne støtter SRC -egenskapen for å finne kildebildet.

Dette innlegget tjener følgende læringsutbytte:

• Hvordan endre bildekilden i JavaScript
• Eksempel 1: Endre bildekilde for lokalt filbilde i JavaScript
• Eksempel 2: Endre bildekilde for nettbasert bilde i JavaScript

Hvordan endre bildekilden i JavaScript

JavaScript er viktig for å endre visningen av bildet dynamisk. For eksempel img HTML -elementet gir src Eiendom for å endre kilden til bildet. Kilden til bildet kan være et lokalt system eller et hvilket som helst URL -bilde.

Syntaksen for å anvende SRC -egenskapen ved hjelp av JavaScript er gitt nedenfor:

Syntaks

dokument.getElementById ("MyImageId").SRC = "Newsource.png ";

Parameter

Beskrivelsen av parametrene er som følger:

• MyImageId: Angir bilde -ID.
• src: refererer til kilden til bildet.

Eksempel 1: Endre bildekilde for det lokale bildet

Et eksempel er tilpasset for å endre kilden til et bilde gjennom den lokale filen i JavaScript. Eksemplet består av HTML- og JavaScript -kodefiler.

HTML -kode

Eksempel for å endre bildekilden i JavaScript

Endre bildeknapp

I denne koden, src attributt brukes til å hente bildet "datamaskin.jpg“. Etter det en “Endre bildeknapp”Legges til HTML -filen som utløser endringercr () metode. De endringercr () Metoden er skrevet i en JavaScript -fil.

JavaScript -kode

funksjon endringercr ()
dokument.getElementById ("Imgid").src = "bøker.jpg ";

I denne koden, endringerrc () Metode henter elementet ved å bruke IDen "Imgid”Og setter verdien av“src”Attributt til det elementet.

Produksjon

Utgangen viser at etter å ha trykket på “Endre bildeknapp”Kildefilen til bildet blir endret, og det nye bildet vises.

Eksempel 2: Endre bildekilde for et nettbasert bilde

Et annet eksempel brukes for å endre bildekilden gjennom URLen i JavaScript. Den komplette koden er delt inn i HTML- og JavaScript -filer.

HTML -kode

Eksempel for å endre nettbilde i JavaScript

Endre bilde

Beskrivelsen av koden er som nedenfor:

• For det første bredde og høyde av bildet er tilordnet bildet innen Tagger.
• Etter det, URL av et bilde er gitt av src Eiendom for å vise bildet i nettleservinduet.

JavaScript -kode

funksjon endringercr ()
dokument.getElementById ("Imgid").src = "https: // cdn.Pixabay.com/foto/2022/07/28/23/42/Rainbow-7350780__340.jpg ";

I denne koden, endringercr () Metoden brukes til å utløse en hendelse når brukeren klikker på knappen for å endre kilden til bildet.

Produksjon

Utgangen illustrerer at når en bruker klikker på "Endre bilde”, Det nye bildet erstattes med det eksisterende.

Konklusjon

JavaScript gir en src Attributt for å endre bildekilden ved å spesifisere banen til filen. For eksempel getElementId () metoden brukes til å trekke ut HTML -elementet gjennom id, og deretter SRC Eiendom vil endre kildebildet. Etter utvinning tildeles den nye kildebildefilen. Her har du lært å endre bildekilden i JavaScript. For dette har vi demonstrert et sett med eksempler i forskjellige scenarier.