el mostrar una imagen al recibir el foco es sencillo.
Tengamos el siguiente código html:
Código HTML:
Ver original<a href="#" title="título">Casa 1
<img src="imagen1.jpg" alt="alt" /></a>
lo primero es esconder la imagen:
a continuación definir qué ocurre al posicionar el ratón sobre el enlace:
Código CSS:
Ver originala:hover img {
display: block; /*para que se puedan aplicar ciertas propiedades*/
position: absolute; /*para que su aparición no afecte a los otros elementos*/
left: XXpx;
top: YYpx; /*para colocar su aparición donde deseemos*/
}
recuerde que deberá cumplimentar con el resto de declaraciones necesarias (tanto la imagen, como el enlace /a/, como los ancestros de ellos (la lista, tabla o cajas que lo contenga).
Pero antes de seguir, creo que debería pasar por este tema:
cambiar imagen con css
Las advertencias también le serían aplicables.