[SOLUCIONADO] ¿Cómo trabajar onmouseover con puro JS sin la propiedad en HTML?

[berkeleyPunk]

Buenas noches.

La idea es simple: emular el hover de CSS en javascript.


He googleado incansablemente, y buscado aquí en Foros del Web, y resulta que todos los ejemplos y posts tratan el tema pero usando la propiedad onmouseover en el HTML. Algo así:

Código HTML:

<img src="img1.png" name="img" onmouseover='img.src="img2.png"' onmouseout='img.src="img1.png"' />
 

Pero yo deseo hacerlo todo dentro de las etiquetas <script type="text/javascript"></script>

Desde luego, ya intenté esto:

Código Javascript:

var imagen = document.getElementById("img");
  
  if ( imagen.onmouseover )
  {
      alert("Pusiste el cursor encima de la imagen");
  }
 

Pero no sirve!



Saludos cordiales!

[SeaPirates]

Podrías utilizar la librería jQuery que te facilita las funciones:

Código Javascript:

$(document).on('mouseover', '#imagen', function() {
     alert("Pusiste el cursor encima de la imagen");
     $(this).attr('src', 'imagen2.png');
});
 

[jonni09lo]

Iniciado por SeaPirates

Podrías utilizar la librería jQuery que te facilita las funciones:

Código Javascript:

$(document).on('mouseover', '#imagen', function() {
     alert("Pusiste el cursor encima de la imagen");
     $(this).attr('src', 'imagen2.png');
});
 

Creo que el estimado dijo que quería en puro JS, además si hubiera querido usar jQuery hubiera posteado en el foro de jQuery. No?

Estas usando mal los eventos, debes usar listeners para poder capturar un determinado evento en un elemento.

Código HTML:

<img src="img1.png" id="img" />
 

Código Javascript:

var imagen = document.getElementById("img");
  
imagen.addEventListener("mouseover", function(){
    alert('Hola');
    imagen.src = "img2.png";
}, false);
 

Demo: http://jsfiddle.net/Lp5GA/

PD: si quieres dar un soporte cross browser mira este tema

Saludos

[Alexis88]

Puedes asignarle el evento de dos formas:

Mediante un evento escuchador

Código Javascript:

elemento.addEventListener("mouseover", function(){
  //Instrucciones
}, false);
 

Sobre el elemento

Código Javascript:

elemento.onmouseover = function(){
  //Instrucciones
};
 

Aquí puedes ver un ejemplo en acción.

Saludos

[berkeleyPunk]

Gracias por responder a los maestros jonni09lo y Alexis88 . También agradezco al compañero SeaPirates, aunque ciertamente no es jQuery lo que estoy buscando sino JS puro (aunque por otro lado también sirve, porque me he dado a la tarea de aprender a manejar un poco de jQuery).

Muy bien, entendido, debo hacerlo con addEventListener.

He visto los ejemplos que ponen en jsfiddle.net y funcionan perfectamente. El caso es que los copio tal cual en mi Dreamweaver, los corro y resulta que no jalan. ¿Por qué?

Me he pasado toda la mañana buscando y aprendiendo esto de los escuchadores. Ya aprendí algo y aún no logro ver por qué no funcionan en local los ejemplos que ustedes ponen en jsfiddle.net. Nota: los ejecuté en las últimas versiones de Chrome, Firefox, Opera y en IE11.

Les pongo el código con el que pruebo:

Código HTML:

<div id="miDiv" style="width:400px; height:200px; background-color:black;">
  </div>
 

Código Javascript:

elemento = document.getElementById("miDiv");
    elemento.addEventListener("mouseover", function(){
      alert("Pusiste el cursor encima del DIV");
    }, false);
 

...y no funciona.

Saludos

[jonni09lo]

@berkeleyPunk has probado colocando el codigo javascript dentro de:

Código Javascript:

window.onload=function(){
   //código
}
 

O antes de cerrar body?

Recuerda de que se ejecuta de arriba a abajo el código y si no haces ninguna de las dos cosas antes mencionadas no funcionara ya que javascript no podrá acceder a un elemento que aun no se ha cargado

Saludos

[berkeleyPunk]

Iniciado por jonni09lo

@berkeleyPunk has probado colocando el codigo javascript dentro de...

Hubiera jurado que sí probé hacerlo, aunque sin fruto alguno... pero lo acabo de hacer en atención a tu indicación... y funcionó!

Ok, ya sé cómo manejar eventos en JS.

Ya nada más para terminar, comentas:

Iniciado por jonni09lo

... si no haces ninguna de las dos cosas antes mencionadas no funcionara ya que javascript no podrá acceder a un elemento que aun no se ha cargado

Ojalá puedas aclararme esto, que al parecer no tengo aún muy clara la relación entre terminar de cargarse una página y el buen funcionamiento de los scripts.

Entiendo que un documento web termina de cargarse cuando todos y cada uno de sus elementos se han descargado del servidor en el cliente: la estructura HTML, imágenes, scripts, lo que sea, todo. Entiendo que si tenemos una página con innumerable cantidad de imágenes y de gran tamaño, por ejemplo una web porno, va a tardar algo en cargarse la página, así que en este caso se entiende que no funcionen algunos scripts hasta que no se descarguen todas las imágenes. Pero bueno, supongamos que esperamos 1 largo minuto a que efectivamente se descargue toda la página. Una vez que todo está ya descargado en el cliente, ¿por qué no habrían de funcionar los scripts JS si ya se descargó completamente la página? Entiendo que no jalen cuando todavía está en proceso de descarga, pero ¿por qué no después de terminada la descarga?

Estas preguntas se aplican al ejemplo con el que estoy aprendiendo addEventListener: ok, no funciona el script porque igual y todavía no se descarga la imagen completa, pero ¿por qué no funciona después que ya se descargó?

Saludos

[jonni09lo]

Hay dos conceptos que debes de tener en cuenta, uno de ellos es la carga del DOM y la otra es la carga de los elementos de la pagina web. Hay una sutil diferencia. Cuando se carga el DOM, significa que todos los elementos html se han cargado y son accesibles, aún si sus contenidos no están totalmente cargados (como las imagenes por ejemplo)

window.load lo que hace es que cuando se cargue tanto el DOM como los contenidos de la pagina se ejecute la función que determinamos (en este caso añadir un listener a un div). Si no quieres hacer esto para no esperar la "eternidad" a que este disponible todo tienes dos opciones.

1. Ejecutar las acciones cuando el DOM este listo (usando la función domReady de la respuesta aceptada).

2. Colocar los scripts antes de cerrar body para garantizar que los elementos del DOM que queremos acceder ya estén disponibles (recuerda de que el DOM se carga de arriba a abajo)

Saludos

[berkeleyPunk]

Iniciado por jonni09lo

Hay dos conceptos que debes de tener en cuenta, uno de ellos es la carga del DOM y la otra es la carga de los elementos de la pagina web. Hay una sutil diferencia...

Justamente ayer estaba leyendo algo sobre lo que comentas. Y para asegurarme que el script funcione hasta que termine de cargarse la página, uso el window.onload, que tiene precisamente esa función, a saber, que se ejecuten las instrucciones que se le pongan dentro, una vez que se haya terminado de cargar la página.

Bien, todo más claro ahora.

Gracias a todos y hasta luego.