Añadir enlaces encima a una imagen

Por el 30 de mayo de 2006

en: Sin categoría

Esta es una simple manera de añadir un efecto que añade uno o varios enlaces encima de una fotografía y despliga una capa con información del enlace, en este ejemplo probamos con un mapa que es la utilidad más común que se me ocurre.

C.Leon
León es un provincia española perteneciente a la comunidad autónoma de Castilla y León, está situada al noroeste de la Península Ibérica …
C.Mancha
Castilla-La Mancha es la comunidad autónoma española formada por las siguientes provincias: Albacete, Ciudad Real, Cuenca, Guadalajara y Toledo.
Andalucia
Andalucía es una comunidad autónoma española situada al sur de la Península Ibérica. Limita al sur con Gibraltar, el mar Mediterráneo y el océano Atlántico…

<head> <style type="text/css"> .uk {padding:0; margin:0; list-style-type:none; background:#fff url(/images/mapa_espana.gif); width:300px; height:350px; margin:50px 225px 100px 225px; position:relative;} .uk li a {text-indent:-999px; display:block; width:8px; height:8px; background:#000; position:absolute; line-height:8px;} .uk li a em {visibility:hidden; position:absolute;} .uk li a.gl {top:120px; left:90px;} .uk li a.bf {top:190px; left:112px;} .uk li a.du {top:220px; left:120px;} .uk li a:hover {background:#600; text-indent:0; height:1.2em; font-size:1em; color:#fff; line-height:1em; padding:2px 10px; width:90px;} .uk li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #600; width:150px; color:#600; padding:25px;font-style:normal; top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; letter-spacing:1px; line-height:1.5em;} * html .uk li a:hover {width:110px; height:1.5em; w\idth:90px; he\ight:1.2em;} .uk li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #600; width:150px; color:#600; padding:25px;font-style:normal; top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; letter-spacing:1px; line-height:1.5em;} * html .uk li a:hover em {width:200px; w\idth:150px;} .uk li a:hover em span {display:block; width:0; height:0; overflow:hidden; border:15px solid #fff; border-width:15px 0 15px 15px; border-left-color:#600; position:absolute; left:0; top:128px;} * html .uk li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;} </style> </head> <body> <div id="wrapper"> <div id="head"> <div id="info"> <ul class="uk"> <li><a class="gl" href="#nogo">C.Leon<img src="/images/leon.png" alt="Foto de Castilla y Leon" title="Foto de Castilla y Leon" />León es un provincia española perteneciente a la comunidad autónoma de Castilla y León, está situada al noroeste de la Península Ibérica …</a></li> <li><a class="bf" href="#nogo">C.Mancha<img src="/images/mancha.png" alt="Foto de Castilla y la Mancha" title="Foto de Castilla y la Mancha" />Castilla-La Mancha es la comunidad autónoma española formada por las siguientes provincias: Albacete, Ciudad Real, Cuenca, Guadalajara y Toledo.</a></li> <li><a class="du" href="#nogo">Andalucia<img src="/images/andalucia.png" alt="Foto de Andalucia" title="Foto de Andalucia" />Andalucía es una comunidad autónoma española situada al sur de la Península Ibérica. Limita al sur con Gibraltar, el mar Mediterráneo y el océano Atlántico…</a></li> </ul>

Añadir enlaces encima a una imagen

Dejar un comentario

Últimas entradas

Suscripción

POR RSS

POR EMAIL

Enlaces