Foros del Web » Diseño web » Diseño web »

hipervinculo sobre una imagen

Estas en el tema de hipervinculo sobre una imagen en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/08/2007, 18:49
 
Fecha de Ingreso: junio-2006
Mensajes: 169
Antigüedad: 8 años, 1 mes
Puntos: 0
hipervinculo sobre una imagen

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...
__________________
Lo poco que sé se lo debo a mi ignorancia....
  #2 (permalink)  
Antiguo 08/08/2007, 18:54
Avatar de pzin
Moderatoren
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 9.145
Antigüedad: 12 años
Puntos: 1588
Re: hipervinculo sobre una imagen

¿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é.
  #3 (permalink)  
Antiguo 08/08/2007, 19:37
 
Fecha de Ingreso: junio-2006
Mensajes: 169
Antigüedad: 8 años, 1 mes
Puntos: 0
Re: hipervinculo sobre una imagen

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...
__________________
Lo poco que sé se lo debo a mi ignorancia....
  #4 (permalink)  
Antiguo 08/08/2007, 19:51
Avatar de pzin
Moderatoren
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 9.145
Antigüedad: 12 años
Puntos: 1588
Re: hipervinculo sobre una imagen

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.
  #5 (permalink)  
Antiguo 08/08/2007, 22:32
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.403
Antigüedad: 7 años, 1 mes
Puntos: 1566
Re: hipervinculo sobre una imagen

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
  #6 (permalink)  
Antiguo 09/08/2007, 01:46
 
Fecha de Ingreso: agosto-2007
Mensajes: 16
Antigüedad: 6 años, 11 meses
Puntos: 0
Re: hipervinculo sobre una imagen

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!
  #7 (permalink)  
Antiguo 09/08/2007, 06:55
Avatar de pzin
Moderatoren
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 9.145
Antigüedad: 12 años
Puntos: 1588
Re: hipervinculo sobre una imagen

Cita:
Iniciado por emprear Ver Mensaje
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.
  #8 (permalink)  
Antiguo 10/08/2007, 06:22
 
Fecha de Ingreso: agosto-2007
Mensajes: 16
Antigüedad: 6 años, 11 meses
Puntos: 0
Re: hipervinculo sobre una imagen

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
  #9 (permalink)  
Antiguo 10/08/2007, 10:18
Avatar de pzin
Moderatoren
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 9.145
Antigüedad: 12 años
Puntos: 1588
Re: hipervinculo sobre una imagen

Los fondos pueden manipularse (moverlos, centrarlos, etc.) pero no pueden cambiarse sus medidas.
  #10 (permalink)  
Antiguo 10/08/2007, 14:08
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.403
Antigüedad: 7 años, 1 mes
Puntos: 1566
Re: hipervinculo sobre una imagen

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="&copy; 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">
<!--
#Layer1 {
position:absolute;
width:200px;
height:168px;
z-index:0;
left: 50px;
top: 50px;
}
#Layer2 {
position:absolute;
width:200px;
height:168px;
z-index:1;
left: 50px;
top: 50px;
vertical-align: 50%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 168px;
}
a {
color: #00CC00;
background-color: transparent;
}
-->
</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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:52.
SEO by vBSEO 3.3.2