Añadir enlaces encima a una imagen

Etiquetas:
- css

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></p> <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><p></head></p> <p><body></p> <div id="wrapper"> <div id="head"> <div id="info"> <ul class="uk"> <li><a class="gl" href="#nogo">C.Leon<em><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 ...<span></span></em></a></li> <li><a class="bf" href="#nogo">C.Mancha<em><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.<span></span></em></a></li> <li><a class="du" href="#nogo">Andalucia<em><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...<span></span></em></a></li> </ul> <p>

Enlaces Relacionados

Enviado por manu el Mar, 05/30/2006 - 22:18.

2173 lecturas

Libros en Ingles y Español

Enviado por almacendelibros.com (no verificado) el Lun, 06/09/2008 - 19:32.

Distribuidora de libros tipo saldo, más de 30.000 mil títulos de todas las categorias, con descuentos de hasta 90% menos. libros en español, biblias, espirituales. se hacen envios a todo el mundo.

responder

Intercambio de enlace

Enviado por Solange (no verificado) el Dom, 05/25/2008 - 01:27.

Esta bueno eso del mapa... ese ejemplo

responder

DISTRIBUIDORA DE LIBROS TIPO SALDO

Enviado por DISTRIBUIDORA DE LIBROS TIPO SALDO (no verificado) el Mar, 03/25/2008 - 22:17.

Venta de libros tipo saldo, en ingles y español, descuentos desde 50% a 90% menos, se hacen envios a todo el mundo.

distribuidora, niños, Biblias, Salud, Cristianos, venta, compra, libros,
http://www.almacendelibros.com/default.asp?N=3343&pi=02100002602

responder

OFERTON DE LIBROS EN ESPAÑOL E INGLES

Enviado por ofertondelibros (no verificado) el Lun, 03/03/2008 - 22:20.

Venta de libros en ingles y español, descuentos desde 50% a 90% menos, se hacen envios a todo el mundo.

responder

Alquiler de barcos

Enviado por marc tusell galve (no verificado) el Jue, 01/03/2008 - 12:46.

Intercambio de enlaces

responder

todo lo que buscan y

Enviado por publicar articulos gratis - subir fotos - añadir enlaces we (no verificado) el Mié, 11/21/2007 - 12:53.

todo lo que buscan y utilizan los internautas con un solo clic Gratis publicar artículos ,fotos,juegos,consultar calendario,ver television,radio,cine,música,Enlaces,traductor,tiempo,loterias, viajes,prensa,empleo, antivirus,humor y mucho mas…