Изменение изображений с помощью JavaScript по клику

Вот несколько методов, которые можно использовать для изменения изображения с помощью JavaScript при нажатии:

  1. Прослушиватель событий. Вы можете прикрепить прослушиватель событий клика к элементу изображения и изменить его исходный атрибут с помощью JavaScript. Вот пример:
var image = document.getElementById('myImage');
image.addEventListener('click', function() {
    image.src = 'new-image.jpg';
});
  1. Встроенный JavaScript: вы можете использовать атрибут onclickнепосредственно в HTML, чтобы указать функцию JavaScript, которая будет выполняться при щелчке по изображению. Вот пример:
<img src="old-image.jpg" onclick="changeImage()" id="myImage">
<script>
    function changeImage() {
        var image = document.getElementById('myImage');
        image.src = 'new-image.jpg';
    }
</script>
  1. jQuery: Если вы используете jQuery в своем проекте, вы можете использовать его функции обработки событий, чтобы изменить источник изображения при нажатии. Вот пример:
$('#myImage').click(function() {
    $(this).attr('src', 'new-image.jpg');
});
  1. Переключение классов CSS: вы можете создавать классы CSS с различными фоновыми изображениями и переключаться между ними с помощью JavaScript. Вот пример:
<style>
    .image1 {
        background-image: url('image1.jpg');
    }

    .image2 {
        background-image: url('image2.jpg');
    }
</style>
<div id="myImage" class="image1" onclick="toggleImageClass()"></div>
<script>
    function toggleImageClass() {
        var image = document.getElementById('myImage');
        image.classList.toggle('image1');
        image.classList.toggle('image2');
    }
</script>