Answers for "change image onclick javascript"

change image onclick javascript

//in html
<img id="img" data-image="user1" src="/assets/user1.jpg" onclick="change_image()" />

//in javascript
const img = document.getElementById('img');
const change_image = function() {
  if (img.dataset.image == "user1") {
  	img.src = "/assets/user2.jpg";
    img.dataset.image = "user2";
    return
  };
  
  if (img.dataset.image == "user2") {
  	img.src = "/assets/user1.jpg";
    img.dataset.image = "user1";
    return
  };
};

change image onclick javascript

<p>
    <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
        style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"/>
</p>
<script>
function changeImage() {
    if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
    } else {
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
    }
}
</script>

changement image js sur click

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src','images/firefox2.png');
    } else {
      myImage.setAttribute('src','images/firefox-icon.png');
    }
}

how to change image on mouse click in javascript

<img src="imageName1.jpg" onmouseover="imagefun()" id="getImage">