¿Cambiar las fotos de una ventana cuando hover en un li?

[Linton]

Quiero hacer un menú con una foto arriba de cada <ul>, y que esa imagen cambie cuando se haga hover sobre cada <li>; anabjo pongo el html. ¿Cómo sería el script? ¡Gracias de antemano!

Código HTML:

<div>
<span id="titular">Ropa</span>
    <img src="imagen.jpg">
        <ul>
        <a href="#"><li>Chaquetas</li></a>
        <a href="#"><li>Abrigos</li></a>
        <a href="#"><li>Camisetas</li></a>
        <a href="#"><li>Tocados</li></a>
    </ul>
</div>
 

[Linton]

Vale, ya lo he montado parcialmente. El script:

Código Javascript:

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

..y el html:

Código HTML:

<div>
    <img class="uno" src="chaqueta.jpg">
    <img class="dos" src="abrigo.jpg">
    <img class="tres" src="camiseta.jpg">
    <img class="cuatro" src="tocado.jpg">
    <ul>
    <a href="#"><li class="selector" id="uno">Chaquetas</li></a>
    <a href="#"><li class="selector" id="dos">Abrigos</li></a>
    <a href="#"><li class="selector" id="tres">Camisetas</li></a>
    <a href="#"><li class="selector" id="cuatro">Tocados</li></a>
    </ul>
    </div>
 

Lo que falta ahora es que se quede fija la última imagen al salir de los <li> con enlaces. ¿Cómo lo hago? Gracias, un saludo.

[andresgarciadev]

no veo caso en cargar las 4 imagenes al comenzar, solo carga una que aparesca al comienzo y le cambias el src cuando pases por algun li
para saber a que src cambiasle podrias a cada li asignarle un nuevo data-attribute='src' asi acceder a el con $(this).data("attribute") y alterar el src de la imagen existente

[Linton]

Gracias, voy a intentarlo.