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>

11 Respuestas a Añadir enlaces encima a una imagen

marc tusell galve

3 de Enero de 2008 a las 7:46 am

Intercambio de enlaces

escritor

21 de Noviembre de 2007 a las 7:49 am

aqui puedes ver un ejemplo

http://www.iniciodirecto.com

publicar articulos gratis - subir fotos - añadir enlaces we

21 de Noviembre de 2007 a las 7:53 am

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…

Anónimo

13 de Noviembre de 2007 a las 2:36 am

Miles de productos y servicios seleccionados para que realices las mejores compras

DISTRIBUIDORA DE LIBROS TIPO SALDO

25 de Marzo de 2008 a las 6:17 pm

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

ofertondelibros

3 de Marzo de 2008 a las 5:20 pm

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

almacendelibros.com

9 de Junio de 2008 a las 3:32 pm

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.