hipervinculo sobre una imagen

rrodriguez1310 · #1 (**permalink**) 08/08/2007, 18:49

hola disculpen tanta ignorancia es que estoy nuevo en esto, quisierta saber si teniendo una imagen dentro de una celda de una tabla podria colocarle un hipervinculo encima pues no me deja, me lo crea abajo de la imagen, de antemano gracias...

pzin · #2 (**permalink**) 08/08/2007, 18:54

¿A qué te refieres exactamente con encima?

Un vínculo de texto por encima de la imagen.
Un vínculo de texto por delante de la imagen.
Un vínculo a una imagen.

Disculpa, pero me enredé.

rrodriguez1310 · #3 (**permalink**) 08/08/2007, 19:37

poseo una imagen de una taza de cafe y justo en el medio de la imagen de la taza un viculo que diga tomar. y lleve a otra pagina...

pzin · #4 (**permalink**) 08/08/2007, 19:51

Lo que puedes hacer, es poner la imagen de la taza como fondo de "algo" (una capa, celda, el propio enlace, etc.) y ya no tendrías problemas con poner el enlace.

Suponiendo que la imagen mida por ejemplo 50*50 píxeles, un ejemplo (en CSS) que te valdría sería algo así:

Código:

a.taza:link{
width:50px;
height:50px;
background:#fff url(taza.png) no-repeat center center;
text-align:center;
vertical-align:middle;
}

Si no me he equivocado en nada, tendrías un vínculo hecho de esta forma:
<a class="taza" href="algo.html">tomar</a>
en el que al fondo hay una taza y el texto está centrado a la imagen.

emprear · #5 (**permalink**) 08/08/2007, 22:32

Bonez, me permito hacer una correción a tu código, deberías quitar la pseudoclase "link" como modificador de la etiqueta "a" para la clase ".taza", ya que la misma hará que el efecto de fondo y demas propiedades solo se apliquen a vínculos aun no visitados, una vez visitado el vínculo las propiedades desaparecerán, de lo expuesto el nuevo código sería:

a.taza{
width:50px;
height:50px;
background:#fff url(taza.png) no-repeat center center;
text-align:center;
vertical-align:middle;
}

Saludos

Nesoe · #6 (**permalink**) 09/08/2007, 01:46

Yo tenía el mismo problema, no conseguía poner enlaces sobre una imagen. Voy a probar ahora mismo lo que habeis comentado.

Muchas gracias!

pzin · #7 (**permalink**) 09/08/2007, 06:55

Cita:

Iniciado por emprear

Bonez, me permito hacer una correción a tu código, deberías quitar la pseudoclase "link" como modificador de la etiqueta "a" para la clase ".taza", ya que la misma hará que el efecto de fondo y demas propiedades solo se apliquen a vínculos aun no visitados, una vez visitado el vínculo las propiedades desaparecerán, de lo expuesto el nuevo código sería:

a.taza{
width:50px;
height:50px;
background:#fff url(taza.png) no-repeat center center;
text-align:center;
vertical-align:middle;
}

Saludos

Perfecto.

Nesoe · #8 (**permalink**) 10/08/2007, 06:22

Hola a todos!!

Probé lo que dijisteis y me funciona genial. Pero tengo un problema.
Yo la imagen sobre la que quiero poner los hipervínculos no quiero que sea fondo de nada. Quiero que sea una imagen con <img> porque si la pongo de fondo no puedo manipular su width y necesito hacerlo para que se me vea igual en todas las resoluciones.

Lo que dijisteis también se podría hacer de alguna forma para imagenes?

Saludos

pzin · #9 (**permalink**) 10/08/2007, 10:18

Los fondos pueden manipularse (moverlos, centrarlos, etc.) pero no pueden cambiarse sus medidas.

emprear · #10 (**permalink**) 10/08/2007, 14:08

Digo yo, no es más facil cargar tu taza en el fireworks o Photoshop, agregarle el texto en el centro y hacer un vínculo desde la imágen?.

Ahora que si quieres hilar fino y complicarte la vida, aquí te va el código

Cita:

<!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" xml:lang="es" lang="es" >
<head>
<title>Link sobre imagen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="copyright" content="© 2006, Guillermo Gianello" xml:lang="es" lang="es" />
<meta http-equiv="Content-Language" content="ES" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">

</style>
</head>

<body>
<div id="Layer1"><img src="link_sobre_img.jpg" width="200" height="168" alt="" /></div>
<div class="Estilo1" id="Layer2">
<a href="http://www.forosdelweb.com/" target="_blank">Link</a></div>

</body>
</html>

Los resultados puedes apreciarlos Aquí

Un detalle, la Señora que aparece en la foto es Doña Tota, mi Madre (Que más parece mi abuela), deleitándose al influjo de Art Garfunkel.

Saludos