4

Mi objetivo es que al pasar el mouse por encima de la imagen, esta cambie a otra.

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";
}

3 respuestas 3

6

Codigo

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>


Explicacion

El problema es que estas haciendo esto:

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

Cuando en su lugar deberias hacer esto:

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

Lo que ocurre cuando cambias el atributo .innerHTML es que cambias lo que se encuentre dentro de tu elemento imagen, es decir, lo que se encuentre después del > hasta el <, mientras que al cambiar el atributo src, modificas realmente el origen de la imagen de la etiqueta.


Actualizacion

He dejado un ejemplo que podría servirte si quieres que al alejar el mouse se restaure la imagen original.

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>

4
  • Muchísimas gracias por la ayuda :) Commented el 13 ago. 2017 a las 14:19
  • @Vendetta Con mucho gusto, si la respuesta te ha servido, no olvides marcarla como aceptada, asi contribuimos a futuros usuarios con el mismo problema. Commented el 13 ago. 2017 a las 14:24
  • @Vendetta Por cierto, he agregado un ejemplo ma que podria servirte por si quieres restaurar la imagen original cuando el mouse este por fuera Commented el 13 ago. 2017 a las 14:26
  • Lo vi, tenia pensado usar también el mouseout, pero me iba a dar el mismo problema así que simplifique código. Igualmente muchísimas gracias por las molestias. PD: Tenia que pasar unos minutos para aceptarte la respuesta. Commented el 13 ago. 2017 a las 14:29
2

Puedes cambiar la imagen con el evento definido en el mismo HTML así:

<img src="ikefeliz_2.png" onmouseover="this.src='ikepeligro_2.jpg'">
1
  • Además de onmouseover se aconseja poner onmouseout para que la imagen no se quede siempre cambiada.
    – Josem
    Commented el 6 nov. 2018 a las 20:29
2

solo quiero complementar la respuesta de @ivan-botero usando funciones anónimas y haciendo referencias en el scope adecuado para evitar el pequeño overhead de las funciones nombradas, la asignación de una variable imagen en cada evento y la búsqueda del elemento en el DOM en cada evento también:

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: Agregué también la variable original para regresar siemre la imagen original en el caso de que haya más imagenes y se decida usar otra propiedad para buscar los elementos en el DOM como la clase o el tag en lugar del ID.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.