Jak zamienić obrazy w JavaScript
W tym artykule sprawdzi metodologie zamiany obrazów w JavaScript.
Jak zamienić obrazy w JavaScript?
Aby zamienić obrazy w JavaScript, można zastosować następujące metody:
- "mecz()„Metoda z„na kliknięcie" wydarzenie
- "Obejmuje ()„Metoda z„onmouseover" wydarzenie
- Obok zamiany za pomocą „src" atrybut
Następujące podejścia pokażą koncepcję jeden po drugim!
Metoda 1: zamiana obrazów w JavaScript za pomocą metody Match () z wydarzeniem OnClick
„„mecz()„Metoda odpowiada ciągowi do wyrażenia regularnego i„na kliknięcie”Wydarzenie przekierowuje się do funkcji dostępnej po kliknięciu przycisku. Metody te można zaimplementować w połączeniu, aby dopasować źródło obrazu i zamienić go z innym obrazem, określając jego ścieżkę.
Składnia
strunowy.mecz (mecz)W podanej składni „mecz”Odnosi się do wartości, którą należy przeszukiwać i dopasować.
Spójrzmy na poniższy przykład.
Przykład Zamień obrazy Teraz utwórz przycisk z przekierowaniem zdarzenia OnClick do funkcji o nazwie „swapimages ()”: Następnie określ źródło domyślnego obrazu odpowiednio wraz z jego identyfikatorem i skorygowaną wysokością: Teraz zdefiniuj funkcję o nazwie „swapimages ()". Najpierw będzie dostęp do określonego obrazu za pomocą „dokument.getElementById ()" metoda. Następnie zastosuj „src”Atrybut wraz z„mecz()„Metoda zastosowania kontroli domyślnego obrazu w jego argumencie. Jeśli określone źródło pasuje do domyślnego obrazu, „The”src„Atrybut zmieni swoją wartość na inny obraz. Spowoduje to zamianę obu obrazów: Odpowiednie wyjście będzie następujące: Metoda 2: Wymiana obrazów w JavaScript za pomocą metody zawierającej () z zdarzeniem onmouseover „„Obejmuje ()”Metoda sprawdza, czy ciąg zawiera określony ciąg w jego argumencie i„onmouseover”Zdarzenie występuje, gdy kursor jest przenoszony na określony element. Mówiąc dokładniej, techniki te można zaimplementować, aby sprawdzić źródło obrazu i zamienić określone obrazy na unoszeniu. Przykład Zamień obrazy Następnie określ źródło obrazu i dostosuj jego wymiary. Dołącz także wydarzenie o nazwie „onmouseover”, Który będzie dostępny do funkcji o nazwie SwapImages () z określonym identyfikatorem: Następnie zdefiniuj funkcję o nazwie „swapimage ()". Teraz powtórz omawiane wcześniej kroki w celu uzyskania dostępu do domyślnego obrazu. W następnym kroku zastosuj „Obejmuje ()„Metoda sprawdzania, czy„src”Atrybut zawiera domyślny obraz w swoim argumencie. Jeśli tak, konkretny atrybut zostanie przypisany nową ścieżkę obrazu, aby zamienić na najem. W drugim przypadku ten sam obraz zostanie odzyskany w „w przeciwnym razie" stan : schorzenie: Wyjście Metoda 3: Zmienanie obrazu obok siebie za pomocą atrybutu SRC W tej konkretnej metodzie dwa określone obrazy zostaną zamienione obok siebie, uzyskując dostęp do obrazów i wyrównując je za pomocą „src" atrybut. Przykład Następnie utwórz przycisk z „na kliknięcie„Wydarzenie wywołujące funkcję o nazwie SwapImages () Po kliknięciu: Teraz zadeklarujemy funkcję o nazwie „swapimages ()”, Które najpierw uzyskają obrazy według ich identyfikatorów za pomocą„dokument.getElementById ()" metoda. A później "src„Atrybut połączy dostęp do obrazów w taki sposób, aby SRC pierwszego obrazu jest równe drugie, a zatem obrazy zostaną zamienione po kliknięciu dodanego przycisku: Wyjście Omówiliśmy różne metody zamiany obrazów w JavaScript. Wniosek Aby zamienić obrazy w JavaScript, użyj „mecz()„Metoda z„na kliknięcie„Wydarzenie pasujące do domyślnego obrazu i zamień go z innym obrazem na przycisku, kliknij„Obejmuje ()„Metoda z„onmouseover”Zdarzenie, aby zamienić domyślny obraz z określonym obrazem na myszy unoszących się lub wyrównać„src”Atrybut obu obrazów, aby zamienić obrazy obok siebie. Ten zapis wykazał metody wymiany obrazów w JavaScript.
W poniższym przykładzie dodamy następujące nagłówek za pomocą „
var get = dokument.getElementById („getImage”);
if (zdobądź.src.mecz („ImageUpd1.Png "))
Dostawać.src = "imageUpd2.Png ";
w przeciwnym razie
Dostawać.src = "imageUpd1.Png ";
Tutaj najpierw dołączymy następujący element nagłówka:
var get = dokument.getElementById („getImage”);
if (zdobądź.src.Obejmuje („ImageUpd1.Png "))
Dostawać.src = "imageUpd2.Png ";
w przeciwnym razie
Dostawać.src = "imageUpd1.Png ";
Po pierwsze, dołączymy pożądane obrazy z ich określonymi ścieżkami i wymiarami:
Niech get1 = dokument.getElementById („IMG1”);
Niech get2 = dokument.getElementById („IMG2”);
Let Fetch = Get1.src;
Get1.src = get2.src;
Get2.src = fetch;