Необходимо по клику менять картинку. Т.Е. имеем
<td><img src="img/play.png"></td>
меняется на
<td><img src="img/stop.png"></td>
Как такое сделать?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНеобходимо по клику менять картинку. Т.Е. имеем
<td><img src="img/play.png"></td>
меняется на
<td><img src="img/stop.png"></td>
Как такое сделать?
Добрый день. Попробуйте так, должно работать.
//document.addEventListener('DOMContentLoaded', function(){
function changeImg(elem){
if(elem.src.indexOf('play.png') > 0){
elem.src = 'img/stop.png';
} else {
elem.src = 'img/play.png';
}
}
//});
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td><img src="img/play.png" onclick="changeImg(this);" style="width:100px;height:100px;"></td>
<td><img src="img/stop.png" onclick="changeImg(this);" style="width:100px;height:100px;"></td>
</tr>
</table>
changeImg
в onclick
:(
img
: функция changeImg
- локальная, видна только внутри анонимного обработчика, но не в глобальной области видимости
Вот нашел случайно. То, что нужно. Одно НО - на странице несколько картинок таких (в списке li). В таком случае, скрипт реагирует только на 1 картинку. А как сделать так, чтобы при нажатии img1 менялось на img2, при этом все остальные img2 на странице менялись на img1, кроме нажатой картинки. Суть понятна - обычная кнопка плей в плэйлисте.
Сам скрипт:
<script>
function chg(id){
if (document.getElementById(id).src.indexOf("img/play.png")>0){
document.getElementById(id).src="img/stop.png"
}else{
document.getElementById(id).src="img/play.png"
}
}
</script>
И в нужном месте:
<img src="img/play.png" id="img_1" onClick="chg(this.id)">
var play = false, img = document.querySelector('img'); img.addEventListener('click', () => { img[0].src = play ? 'img/stop.png' : 'img/play.png'; play = !play; });
document.addEventListener('DOMContentLoaded', function(){ сюда вставь то что написал Медвед });
, только этоimg[0].src
замените на это :img.src