Como presentar una imagen al pasar el raton por un enlace

[corretodo]

Como puedo hacer para que al pasar el raton por una url se vea una imagen al lado.
He buscado por google y no he visto nada.
Si he visto montones de ejemplos de pasar el raton por enlaces que tiene una imagen y al pasar el raton sale otra.
Pero lo que necesito es que al pasar el raton por cada url de texto, aparezca una imagen distinta, al lado derecho o al izquierdo.
Algo parecido como pasa cuando tienes una url y le pones title.
En ved de aparezca texto aparezca una imagen.

[alexg88]

Algo así:

http://jsfiddle.net/alexg88/z7CWD/embedded/result/

[corretodo]

si eso es lo que necesito.
Como funciona esto.
Hay que cargar todas la librerias js.

Muchas gracias

[corretodo]

En JSFIDDLE funciona perfectamente.
Pero en mi pagina soy incapaz de hacerlo funcionar
Hago esto:
En el head cargo jQuery 1.4 y añado esto:
$(".user").hover(function(){
$(this).next("img").show();
},
function(){
$(this).next("img").hide();
}
);

En el css añado esto:
.user{
float:left;
}
Y en el body añado esto:

<a class="user" href="www.google.es">Google</a><img style="display:none" src="http://www.google.es/images/logos/ps_logo2.png" />

Es que me falta poner algo?

[alexg88]

Tienes que poner:

Código Javascript:

$(function(){
 
$(".user").hover(function(){
$(this).next("img").show();
},
function(){
$(this).next("img").hide();
} 
);
 
});
 

ó

Código Javascript:

$(document).ready(function(){
 
$(".user").hover(function(){
$(this).next("img").show();
},
function(){
$(this).next("img").hide();
} 
);
 
});
 

Ambas formas sirven para que el javascript no se ejecute hasta que el DOM se haya cargado del todo, por que en caso contrario, al ejecutar el código javascript en el head no está creado el enlace con class user todavía.

[corretodo]

En internet explorer funciona perfectamente pero en Mozilla Firefox y en Safari no funciona.
Supongo que habra que hacer algo más.
Gracias por tu pronta respuesta.

[alexg88]

En firefox y safari deberían funcionar exactamente igual. Debe ser algún problema aparte del código.

También deberías usar la última versión de JQuery a ser posible.

[corretodo]

Si me comentas que funciona.
Mirare a ver si es algo que no doy con ello.
No obstante, muchismas gracias por tu ayuda, no se que hariamos los que no sabemos sin la ayuda que aqui nos dais.
Sola a título de curiosidad dada mi ignorancia en javascript, si no te importa decirme lo siguiente:

<a class="user" href="www.google.es">Google</a><img style="display:none" src="http://www.google.es/images/logos/ps_logo2.png" />

Si el img no esta incluido dentro en el <a href=""></a> ni en la clase "user" como sabe javascript que esa img y no otra es la que tiene que presentar cuando se pasa el raton por Google.

Porque si estuviera de esta forma si lo veria logico
<a class="user" href="www.google.es">Google
<img style="display:none" src="http://www.google.es/images/logos/ps_logo2.png" />
</a>

[alexg88]

La 2ª forma que dices sería una imagen que es un link, no un link con una imagen al lado.

El porqué del funcionamiento es sencillo si revisas el código.

Cuando se hace $(this).next("img") estás seleccionando el primer nodo <img> (la imagen) que es hermano (están al mismo nivel del árbol DOM, es decir, tienen el mismo padre) del nodo <a> (que es el enlace).

[corretodo]

Muchisimas gracias por tu explicacion y por tu ayuda.