Hvordan bytte bilder i JavaScript

Lag nå en knapp med en OnClick -hendelse som omdirigerer til funksjonen som heter “Swapimages ()”:

Etter det, spesifiser kilden til standardbildet sammen med henholdsvis ID og justert høyde:

Nå, definer funksjonen som heter “Swapimages ()”. Det vil for det første få tilgang til det spesifiserte bildet ved å bruke "dokument.getElementById ()”Metode. Deretter bruker du “src”Attributt sammen med“kamp()”Metode for å bruke en sjekk på standardbildet i argumentet. Hvis den spesifiserte kilden samsvarer med standardbildet, "src”Attributt vil endre verdien til et annet bilde. Dette vil resultere i bytte av begge bildene:

Den tilsvarende utgangen vil være som følger:

Metode 2: Bytt bilder i JavaScript ved bruk av inkluderer () Metode med OnmouseOver -arrangementet

“inkluderer ()”Metode sjekker om en streng inneholder en spesifisert streng i sitt argument og“onmouseover”Hendelsen oppstår når markøren flyttes inn på det spesifiserte elementet. Mer spesifikt kan disse teknikkene implementeres for å sjekke bildekilden og bytte de spesifiserte bildene ved sveving.

Eksempel
Her vil vi først inkludere følgende overskriftselement:

Bytt bildene

Deretter spesifiser bildekilden og juster dimensjonene. Inkluder også en hendelse som heter “onmouseover”Som vil få tilgang til funksjonen som heter SwapImages () med den spesifiserte IDen:

Etter det, definer funksjonen som heter “Swapimage ()”. Gjenta de tidligere diskuterte trinnene for å få tilgang til standardbildet.

I neste trinn, bruk "inkluderer ()”Metode for å sjekke om“src”Attributt inkluderer standardbildet i sitt argument. I så fall vil den spesielle attributtet bli tildelt en ny bildebane for å bytte på musens svev. I det andre tilfellet vil det samme bildet bli hentet i “ellers" betingelse:

Produksjon

Metode 3: Side om side Bildebytte ved hjelp av SRC -attributt

I denne spesielle metoden vil de to spesifiserte bildene bli byttet side om side ved å få tilgang til bildene og utjevne dem ved hjelp av “src" Egenskap.

Eksempel
Først vil vi inkludere de ønskede bildene med deres spesifiserte stier og dimensjoner:

Deretter oppretter du en knapp med en "ved trykk”Hendelse som påkaller funksjonen som heter SwapImages () når du klikker:

Nå vil vi erklære en funksjon som heter “Swapimages ()”Som for det første får tilgang til bilder av deres ID -er ved å bruke“dokument.getElementById ()”Metode. Og så "src”Attributt vil koble de tilgjengelige bildene på en slik måte at SRC for det første bildet tilsvarer det andre, og dermed blir bilder byttet når den ekstra knappen klikker:

Produksjon

Vi har diskutert forskjellige metoder for å bytte bilder i JavaScript.

Konklusjon

For å bytte bilder i JavaScript, bruk "kamp()”Metode med en“ved trykk”Hendelse for å matche standardbildet og bytte det med et annet bilde på knappeklikk,“inkluderer ()”Metode med en“onmouseover”Hendelse for å bytte standardbilde med det spesifiserte bildet på musens svev eller utjevne“src”Attributt av begge bildene til å bytte bildene side om side. Denne oppskrivningen demonstrerte metodene for å bytte bilder i JavaScript.