Podemos crear popups con CSS de forma fácil para mostrar la información que deseemos enseñar pero que al mismo tiempo no tengamos que ir a otra página para verla.
Los protagonistas de este truco principalmente son la propiedad overflow, que hace que se muestre el elemento (visible) cuando el cursor se sitúa encima del texto y se oculte cuando dejemos de situarnos encima (hidden), y la propiedad z-index, que hará que la capa del popup se sitúe encima de los demás elementos.
Funciona en IE5.5+/Win, Moz, Op7+, Saf, IE5/Mac
No funciona en IE5.0/Win, Op6
El código CSS para crear los popups sería así:
<style type="text/css"> .nav { float: left; width: 13em; } .nav a { display: block; position: relative; color: #00f; background-color: #fcc; margin-bottom: 0.5em; padding: 0.5em; text-decoration: none; } /* aiuta IE/Mac (rel lh) \*//*/ .linkinside { display: block; } /**/ .nav a:hover { color: #c00; border-width: 0; /* IE */ } #nav1 a .pop { display: block; color: #000; background-color: #fcc; width: 11em; padding: 0.5em; border: 0.5em #f00 solid; position: absolute; top: 0; left: 13.2em; z-index: 10; /* Saf */ visibility: hidden; } #nav1 a:hover .pop { visibility: visible; } </style>
Para que funcione correctamente en Internet Explorer debemos aplicar comentarios condicionales:
<!--[if lt IE 8]><style> /* In IE5.0/Win layout rovina popup, ma in 5.5 e 6 serve per hover su intero blocco (in 5.0 ok grazie a relative su 'a', in 5.5+ problemi 'interlinea') */ .nav a { zoom: 1; } </style>< ![endif]-->
El código HTML sería este:
<div><a name="a"></a><a name="b"></a><a name="c"></a></div> <div class="nav" id="nav1"> <a href="#a"> <span class="linkinside">Link number one</span> <span class="pop"> This is a long explanation of link one, blah, blah, blah, ... </span> </a> <a href="#b"> <span class="linkinside">Link number two Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span> <span class="pop"> This is an explanation of link two, due, zwei, 2, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </span> </a> <a href="#c"> <span class="linkinside">Link number three</span> <span class="pop"> This is about link three, link three is a very interesting link, blah blah blah, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. </span> </a> </div>
Podemos ver un ejemplo de su funcionamiento.