logo

Vyměňte obrázky v JavaScriptu | Příklad jednoduché výměny obrázků onclick

Jak vyměnit obrázky v JavaScriptu?

Můžete použít metodu ID obrázku a metodu getElementById ke změně nebo výměně obrázků kliknutím na tlačítko nebo samotné obrázky v JavaScriptu.

document.getElementById('imgID').src = "newImage.png"

Musí si přečíst:

  • Dynamicky nastavit zdroj obrázku pomocí JavaScriptu
  • JavaScript získá zdroj obrázku ze značky img
  • Změňte zdrojový kód obrázku pomocí JavaScriptu

Příklad funkcí JavaScriptu Výměna obrázků po kliknutí

Ukázkový kód HTML pro změnu obrázku po kliknutí na něj. Výměna dvou obrázků abc.png a xyz.png v JavaScriptu:-

<!DOCTYPE html>
<html>
<body>
    <script type="text/javascript">
        function swapImage(){
            if (document.getElementById("pic").src.endsWith('abc.png') == true)  //Comparison
            { 
                 document.getElementById("pic").src = "xyz.png"; //assignment  

             } 
             else if (document.getElementById("pic").src.endsWith('xyz.png') == true) 
             { 
                document.getElementById("pic").src = "abc.png"; 
                
            }
        }
    </script>


    <img src="abc.png" id="pic" onclick="swapImage()"/>


</body>
</html>

Výstup :

Napište komentář, pokud máte nějaké další příklady nebo máte pochybnosti a návrhy k tomuto tématu.

Poznámka: Všechny kódy příkladů JS jsou testovány v prohlížečích Firefox a Chrome.

OS:Windows 10

Kód:HTML 5 verze