[jQuery] Script para cambiar imágenes con hover

[Linton]

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 (javascript) [Seleccionar] Expandir

<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 (html4strict) [Seleccionar] Expandir

<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!

[Linton]

Ya lo he solucionado cambiando el script:

Código (javascript) [Seleccionar] Expandir

$(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.

[DanB]

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

Código (javascript) [Seleccionar] Expandir


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


Código (html4strict) [Seleccionar] Expandir


<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>

[alan++]

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