Código jQuery para ver una imagen al pasar el ratón sobre un enlace.

   Voy a explicar un código en jQuery, para que, al pasar el puntero del mouse sobre un enlace o, en este caso, sobre un texto cualquiera (sin necesidad de ser un enlace), se nos muestre una imagen cerca del enlace y que esta desaparezca al retirar el puntero del mouse (sin necesidad de hacer click sobre él).
Podéis pensar que me estoy repitiendo con un anterior post. Casi que si. Pero la diferencia es que, en este caso, no sabemos donde estará situada la imagen. Es decir que, dependiendo de la situación de la pantalla donde esté el enlace o texto, allí se mostrará la imagen.

   Vamos al grano. Primero el código en HTML:

      <span class="enlace" title="hyneria.png">Hyneria</span>

   Podéis ver que, en este caso, no se trata de un enlace. Le pongo el nombre de 'enlace' a la clase porque en el CSS le doy apariencia de enlace. Aquí lo importante es 'title' el cual contiene el nombre de la imagen que queremos mostrar (podéis usar las variantes que queráis). 

   Ahora vamos a lo que realmente importa, el código jQuery para que se muestre la imagen al pasar en puntero del mouse por encima y se oculte al retirarlo. Lo cual conseguimos usando el evento del ratón 'hover'.

<!--script para mostrar y ocultar imagen al pasar y retirar el mouse del enlace-->
<script type="text/javascript">
$(document).ready(function(){ //ejecutamos el script cuando se carge la página
var anchoPantalla=$(window).width();
var sitiofoto=$('.enlace');//aquí guardamos todas las clases que sean '.enlace'

//si el ancho de la ventana es menor de 800px lo más probable es que sea pantalla táctil
//con lo cual no queremos que se muestren las imágenes
if (anchoPantalla>800) {
sitiofoto.hover(
function(e){ //función a ejecutar cuando el puntero del ratón esté encima del enlace
//localizamos y guardamos en 'x' e 'y' la posición del cursor
x=e.pageX;
y=e.pageY;

//obtenemos el nombre de la imagen (que debe estar en el atributo 'title')
nombrefoto=$(this).attr('title');

//añadimos al html un div que contendrá la foto
$('<div class="marcofoto"><img src="images/'+nombrefoto+'"></div>"').appendTo('body');
//obtenemos la altura de la imagen para después adaptar la posición
altoimagen=$('.marcofoto img').height();

//y añadimos al css de 'marcofoto' la posición donde aparecerá la imagen
//la cual será unos píxeles más por encima y menos a la izquierda 
//de la actual posición del puntero
$('.marcofoto').css({'left':x-50+'px','top':y-altoimagen-25+'px'});

},
function(){ //función a ejecutar cuando el puntero del ratón sale
//quitamos el div con clase 'marcofoto' que añadimos anteriormente
$('.marcofoto').remove();
}
);
}
})
</script>

   Creo que el script está bien explicado. Podéis comprobar el funcionamiento de este código en la página 'Las Edades de la Tierra', en la zona izquierda despegáis, por ejemplo, la sección del Cretácico y pasáis el mouse sobre los enlaces. Comentar que lo de comprobar el ancho de la pantalla es porque si   la pantalla es táctil no funcionaría correctamente la muestra de la imagen. También que tengáis cuidado con la imagen, no hacerla muy grande y cuanto menos 'pese' mejor. Si tenéis alguna duda no dejéis de comentarla.