[jQuery] Script para cambiar imágenes con hover

Foro de elhacker.net

Programación

Desarrollo Web (Moderador: #!drvy)

[jQuery] Script para cambiar imágenes con hover

0 Usuarios y 1 Visitante están viendo este tema.

Páginas: [1]

Autor

Tema: [jQuery] Script para cambiar imágenes con hover (Leído 4,312 veces)

Linton

Desconectado

Mensajes: 239

[jQuery] Script para cambiar imágenes con hover

« en: 4 Abril 2014, 18:31 pm »

Estoy haciuendo un menú desplegable con una pequeña foto encima de cada <ul>, que debe cambiar según se haga hover en cada <li>.

He organizado uno que las cambia:

Código

<script>
		$(document).ready(function() {
		$(".selector").hover(function(){ 
		var id=$(this).attr("id");
		$("."+id).show(); },function(){ 
			var id=$(this).attr("id"); 
			$("."+id).hide();
			})
		});
	</script>

... pero me falta que deje siempre al final la última en aparecer. El html:

Código

<div>
<img class="uno" src="blusa.jpg">
<img class="dos" src="abrigo.jpg">
<img class="tres" src="tocado.jpg">
<img class="cuatro" src="falda.jpg">
	<ul>
	<a href="#"><li class="selector" id="uno">Blusas</li></a>
	<a href="#"><li class="selector" id="dos">Abrigos</li></a>
	<a href="#"><li class="selector" id="tres">Tocados</li></a>
	<a href="#"><li class="selector" id="cuatro">Faldas</li></a>
	</ul>
</div>

¿Qué le falta? ¡Gracias!


« Última modificación: 13 Abril 2014, 00:33 am por #!drvy »	En línea

Linton

Desconectado

Mensajes: 239

Re: [jQuery] Script para cambiar imágenes con hover

« Respuesta #1 en: 5 Abril 2014, 07:38 am »

Ya lo he solucionado cambiando el script:

Código

$(document).ready(function() {
	$(".selector").on("mouseenter",function(){ 
	var id=$(this).attr("id");
	$(this).closest('div').find('img:visible').hide();
	$("."+id).show(); 
	});
});

¡Sólo falta que cuando despliegue de nuevo ese <li> del menú principal se muestre la primera imagen! ¿Quién me ayuda? Gracias, un saludo.


	En línea

DanB

Desconectado

Mensajes: 13

Re: [jQuery] Script para cambiar imágenes con hover

« Respuesta #2 en: 5 Abril 2014, 13:29 pm »

Hola buenas, hice una cosa parecida pero de otra forma, te lo dejo por si te puede ayudar

Código

$(document).ready(function() {
	$(".selector").on("mouseover",function(){ 
			var imagen = $(this).data("imagen")
			$("#contenedorImagen").attr("src",imagen);	
	});
});

Código

<div>
		<img id="contenedorImagen"  src="blusa.jpg">
				<ul>
			         <a href="#"><li class="selector" id="uno" data-imagen="blusa.jpg">Blusas</li></a>
				<a href="#"><li class="selector" id="dos" data-imagen="abrigos.jpg">Abrigos</li></a>
				<a href="#"><li class="selector" id="tres" data-imagen="tocados.jpg">Tocados</li></a>
				<a href="#"><li class="selector" id="cuatro" data-imagen="faldas.jpg">Faldas</li></a>
				</ul>
			</div>


	En línea

alan++

Desconectado

Mensajes: 57

Re: [jQuery] Script para cambiar imágenes con hover

« Respuesta #3 en: 5 Abril 2014, 14:33 pm »

Ufff!...

Esa maldita mania de complicarse mas de la cuenta...

Yo crearia un evento por hover y jugaria con una imagen de fondo, es decir que cada hover event modifique la imagen de background en la parte que lo desees

Seria bueno charlarlo en otro lugar mas amigable

:-*


	En línea

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Script para cambiar IP automaticamente « 1 2 » Redes	Fox_Neo	19	60,361	27 Mayo 2013, 20:03 pm por Pierre104
	Ayuda con script jquery « 1 2 » Desarrollo Web	motocros_elche	10	6,291	26 Junio 2011, 20:34 pm por Shell Root
	error hover jquery Desarrollo Web	kakashi20	3	1,978	8 Marzo 2014, 01:14 am por EFEX
	¿Dónde falla este script para slide con jQuery? « 1 2 » Desarrollo Web	Linton	11	6,885	19 Marzo 2014, 07:52 am por Linton
	Imagenes con hover dentro de Div horizontal Desarrollo Web	hegispok	0	1,596	31 Enero 2016, 14:08 pm por hegispok