Foros del Web - Ver Mensaje Individual

emprear · #4 (**permalink**) 13/12/2011, 20:32

En principio estás mostrando una imagen al hacerle hover a un link ocultando dicha imagen al retirar el mouse del link.
Hay técnicas un poco más complejas para hacer eso sólo con CSS, como si estuvieses haciendo un tooltip

pero si solo es para mostrar una imagen, más sencillo es hacerlo con javascript

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
#foto {
/* tamaño del div = al tamaño de la imagen */
width:200px;
height:200px;
}
/*]]>*/
</style>
</head>
<body>
<p>
<a href="a.html"
onmouseover="document.getElementById('foto').style.backgroundImage='url(uno.jpg)';"  onmouseout="document.getElementById('foto').style.backgroundImage='none';">
xxx
</a>
</p>
<div id="foto">
<!-- div para foto link hover -->
</div>
</body>
</html>

Lo que no queda claro es lo de "pinchar", supongo te referirás a cuando se sale de la página y se vuelve a entrar.

saludos