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>