Imágenes cambiantes

[Lindir]

Hola,

estoy intentando programar una pequeña aplicación web y me he quedado atascado en un punto. A ver si me podéis echar una mano. Tengo una lista con 4 imágenes. Quiero que cuando el ratón pose encima de una, se haga más grande que las demás. Quiero que se mantenga grande hasta que pose el ratón en otra de las imágenes y así consiga que la anterior vuelva a su estado inicial y la nueva se haga grande. Y así sucesivamente con todas. Si posiciono el ratón en cualquier sitio de la ventana que no tenga imagen, se mantendrá en grande la última que se ha quedado en grande.

Con el código que tengo, cuando pongo el ratón encima de una imagen consigo que se haga grande pero en cuanto quito el ratón vuelve a ser pequeña. Este es mi código:

Código Javascript:

<script type="text/javascript"> 
$(document).ready(function(){
//Larger thumbnail preview 
$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width: '120px',
            height: '120px', 
        }, 300); 
    
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width: '100px' , 
            height: '100px', 
            padding: '5px'
        }, 300); /*velocidad de outfocus*/
});
 
});
</script>
 

Y aquí la lista de imágenes:

Código HTML:

<ul class="thumb">
    <li><a href="#"><img src="images/thumb1.jpg" alt="" /></a></li>
    <li><a href="#"><img src="images/thumb2.jpg" alt="" /></a></li>
    <li><a href="#"><img src="images/thumb3.jpg" alt="" /></a></li>
    <li><a href="#"><img src="images/thumb4.jpg" alt="" /></a></li>
    
</ul>
 

Muchas gracias y un saludo!

[caricatos]

Hola:

¿Porqué tienes los tags "a" si no quieres enlazar...?, así pierde el significado semántico. Si quieres una mano al posarse el ratón, basta con usar css.

"$" no es una función estándar javascript, así que deduzco que usas una librería, y por eso vamos a mover el tema a Frameworks y Plugins Javascript.

Y ahora sí, contestando a la pregunta, basta con cambiar el atributo width o height de la imágen, pero se pierde calidad... La otra opción sin pérdida sería un rollover de la misma imagen, pero eso deberás indicarnoslo.

Saludos

[caricatos]

Tema movido desde javascript

[Lindir]

Las etiquetas <a href="#"> los tengo puestos porque las imágenes enlazarán a una URL que todavía no tengo puesta.

Uso la librería jquery-latest.js.

Si por ejemplo pongo el ratón encima de la imagen 1 y la hago más grande que las demás, como le indico que se mantenga grande hasta tocar cualquier otra imagen? el efecto se puede ver en la siguiente página. Es el efecto de las portadas.

http://ngm.nationalgeographic.com/archives

Está programado en flash pero yo quiero hacer lo mismo con jquery.

Muchas gracias.