Изменение атрибута по клику

332

13 сентября 2017, 15:09

Необходимо по клику менять картинку. Т.Е. имеем

 <td><img src="img/play.png"></td>

меняется на

 <td><img src="img/stop.png"></td>

Как такое сделать?

Answer 1

Добрый день. Попробуйте так, должно работать.

//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>

Answer 2

Вот нашел случайно. То, что нужно. Одно НО - на странице несколько картинок таких (в списке 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)">

Answer 3

Это на 100% то, что было нужно. огромное спасибо. Жирный ПЛЮС в репу.

//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>