Change image using mouseover

Navigation
4

My goal is to move the mouse over the image, it changes to another.

HTML 

<body>
 <img src="ikefeliz_2.png" id="imagen">
</body>

Js 

window.addEventListener('load', iniciar, false);

function iniciar(){
  var imagen=document.getElementById('imagen');
  imagen.addEventListener('mouseover', peligro, false);
}

function peligro(){
  var imagen=document.getElementById('imagen').innerHTML="ikepeligro_2.png";
}
    
asked by Vendetta 13.08.2017 в 16:12
source

3 answers

6

Code 

window.addEventListener('load', iniciar, false);

function iniciar() {
  var imagen = document.getElementById('imagen');
  imagen.addEventListener('mouseover', peligro, false);
}

function peligro() {
  var imagen = document.getElementById('imagen').src = "https://img.utdstc.com/icons/256/app-danger-check-android.png";
}
<body>
  <img src="http://requirementsinc.com/img/icon/PNG/danger.png" id="imagen">
</body>

Explanation

The problem is that you are doing this: 

var imagen = document.getElementById('imagen').innerHTML = "https://img.utdstc.com/icons/256/app-danger-check-android.png";

When you should do this instead: 

var imagen = document.getElementById('imagen').src = "https://img.utdstc.com/icons/256/app-danger-check-android.png";

What happens when you change the attribute .innerHTML is that you change what is inside your image element, that is, what is found after > to < , while changing the attribute src , you really modify the origin of the image of the tag.

Update

I have left an example that could help you if you want the mouse to restore the original image. 

window.addEventListener('load', iniciar, false);

function iniciar() {
  
  var imagen = document.getElementById('imagen');
  
  imagen.addEventListener('mouseover', peligro, false);
  imagen.addEventListener('mouseout', restaurar, false);
}

function restaurar(){
  var imagen = document.getElementById('imagen').src = "http://requirementsinc.com/img/icon/PNG/danger.png";
}

function peligro() {
  var imagen = document.getElementById('imagen').src = "https://img.utdstc.com/icons/256/app-danger-check-android.png";
}
<body>
  <img src="http://requirementsinc.com/img/icon/PNG/danger.png" id="imagen">
</body>
    
answered by 13.08.2017 / 16:17
source
2

You can change the image with the event defined in the same HTML like this: 

<img src="ikefeliz_2.png" onmouseover="this.src='ikepeligro_2.jpg'">
    
answered by 13.08.2017 в 16:21
2

I just want to complement the response of @ ivan-botero using anonymous functions and making references in the appropriate scope to avoid the small overhead of the named functions, the assignment of a variable imagen in each event and the search of the element in the DOM in each event too: 

window.addEventListener('load', iniciar, false);

function iniciar() {      
  var imagen = document.getElementById('imagen'), original = imagen.src;
  
  imagen.addEventListener('mouseover', function(){
      this.src = "https://img.utdstc.com/icons/256/app-danger-check-android.png";
  }, false);
  imagen.addEventListener('mouseout', function(){
      this.src = original;
  }, false);
}
<body>
  <img src="http://requirementsinc.com/img/icon/PNG/danger.png" id="imagen">
</body>

Edit: I also added the original variable to always return the original image in case there are more images and it is decided to use another property to look for the elements in the DOM as the class or the tag instead of the ID.

    
answered by 13.08.2017 в 17:12
Create elements of the DOM with jQuery Problem with recursive multidimensional matrix