Código de JavaScript - Evento hover en javascript para mostrar una imagen al pasar el ratón por encima de otra

Pos: 2

Val: 3.162

Ha mantenido su posición en JavaScript (en relación al último mes)

Evento hover en javascript para mostrar una imagen al pasar el ratón por encima de otra

JavaScript

(4)

Publicado el 23 de Diciembre del 2017 por Xve (294 códigos)

40.911 visualizaciones desde el 23 de Diciembre del 2017

Este código muestra como utilizar los evento de javascript mouseover y mouseout para simular el evento de CSS hover al pasar el ratón por encima de una imagen.

Al pasar el ratón por encima de cualquiera de las imágenes, muestra dicha imagen como background de un div.

onmouseover-y-onmouseout-en-imagen

Versión 1.0
(4)

Publicado el 23 de Diciembre del 2017

gráfica de visualizaciones de la versión: Versión 1.0

40.912 visualizaciones desde el 23 de Diciembre del 2017

<DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<style>

	#mostrar {width:100px;height:100px;background-repeat:no-repeat;border:2px solid Red;}

	</style>

</head>

<body>

<img src="img_1.jpg">

<img src="img_2.jpg">

<img src="img_3.jpg">

<div id="mostrar"></div>

<script>

var imagenes=document.getElementsByTagName("img");

for(var i=0;i<imagenes.length;i++)

	// Creamos el evento mouseover para cada imagen

	imagenes[i].addEventListener("mouseover", function(e){

		document.getElementById("mostrar").style.backgroundImage="url('"+e.target.currentSrc+"')";

});

	// Creamos el evento mouseout para cada imagen

	imagenes[i].addEventListener("mouseout", function(e){

		document.getElementById("mostrar").style.backgroundImage="";

});

</script>

</body>

</html>

Comentarios sobre la versión: Versión 1.0 (4)

miguel

23 de Diciembre del 2017

Gracias por la contribucion

Responder

ScriptShow

24 de Diciembre del 2017

¡Buen aporte. Gracias!

Responder

Alejandro

23 de Marzo del 2022

Tetas

Responder

asdd

18 de Noviembre del 2022

Teta culo Concha,
Careta !!

Responder

Comentar la versión: Versión 1.0


Nombre

Correo (no se visualiza en la web)

Valoración

Comentarios...

CerrarCerrar

Es necesario revisar y aceptar las políticas de privacidad

Acepto las políticas de privacidad

http://lwp-l.com/s4356

Foto Fade Zoom OnClick Responsive

Determinar la versión del navegador Edge con JavaScript

Código de JavaScript - Evento hover en javascript para mostrar una imagen al pasar el ratón por encima de otra

Versión 1.0(4)

Comentarios sobre la versión: Versión 1.0 (4)

Comentar la versión: Versión 1.0

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Versión 1.0
(4)