Вот несколько методов, которые можно использовать для изменения изображения с помощью JavaScript при нажатии:
- Прослушиватель событий. Вы можете прикрепить прослушиватель событий клика к элементу изображения и изменить его исходный атрибут с помощью JavaScript. Вот пример:
var image = document.getElementById('myImage');
image.addEventListener('click', function() {
image.src = 'new-image.jpg';
});
- Встроенный 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>
- jQuery: Если вы используете jQuery в своем проекте, вы можете использовать его функции обработки событий, чтобы изменить источник изображения при нажатии. Вот пример:
$('#myImage').click(function() {
$(this).attr('src', 'new-image.jpg');
});
- Переключение классов 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>