Enlazar una celda de una tabla

dersir · #1 (**permalink**) 02/09/2010, 09:53

Tengo una tabla. En cada celda hay texto, y quiero que cada celda vaya enlazada a otra dirección. Pero la cuestión es que no quiero que el enlace sea el texto de dentro de la celda, sino la propia celda, de modo que al hacer click dentro aunque no sea sobre el texto me redireccione al destino en cuestión.

He pensado en hacerlo con un gestor de eventos "click" en JavaScript porque el caso es que así funciona, pero el problema es que hecho de esta forma cuando el cursor entra en la celda nada le indica al usuario que se encuentra en un enlace: ni cambia el cursor, ni aparece la ruta de destino en la barra de estado, en fin...

¿Alguna forma de conseguirlo utilizando sólo HTML y CSS?

¡Gracias!

noblejis · #2 (**permalink**) 02/09/2010, 10:24

Buenas dersir,

Esto es lo que pides, HTML y CSS:

Código HTML:

<table border=1>
<tr>
<td><a href="www.tuweb.com"><div style="background-color:red; height:100px; width:102px;">Texto 1</div></a></td>
<td><a href="www.tuweb.com"><div style="background-color:yellow; height:100px; width:102px;">Texto 2</div></a></td>
<td><a href="www.tuweb.com"><div style="background-color:green; height:100px; width:102px;">Texto 3</div></a></td>
</tr>		
</table>

Un saludo.

dersir · #3 (**permalink**) 02/09/2010, 10:37

¡Gracias! La única pega que me encuentro ahora es que el texto sale en la parte superior de la celda, en lugar de salir en el centro vertical. Como la celda es de 100 x 100 píxeles, el texto tiene que estar centrado tanto horizontal como verticalmente. ¿Alguna sugerencia?

emprear · #4 (**permalink**) 02/09/2010, 12:04

dersir:

Utilizando javascript puede que te resulte más practico

<td class="link" onclick="window.location='URL' ">texto</td>

y darle un poco de color con css para que resalten los links

td.link{
color: #000;
}

td.link:hover {
color: blue;
}

podrias hacerlo sobre el background-color en lugar del color.

Saludos

dersir · #5 (**permalink**) 02/09/2010, 17:19

Lo intenté con JavaScript pero el problema es que cuando el vínculo se genera a través de un evento "click" en lugar de un <a> el cursor no cambia al situarse sobre él ni tampoco se indica la dirección del enlace en la barra de estado del navegador, con lo cual nada indica al usuario que debe hacer click en ese lugar.

Seguiré probando, ¡un saludo!

emprear · #6 (**permalink**) 02/09/2010, 17:32

dersir:

En primer lugar el evento "click" no existe, se denomina "onclick", tal cual te lo puse en mi ejemplo
Por lo de la "manito" en el cursor, basta con que en el CSS agregues
cursor: pointer;
en cuanto a la barra de estado, se soluciona con
onmouseover="self.status='lo que quieras'; return true;"

yo me limité a responder a tu post original, te recomiendo que en lugar de seguir pidiendo ayuda empieces a leerte algún manual básico de los temas involucrados.

Saludos

dersir · #7 (**permalink**) 02/09/2010, 17:46

Perdón, dije "click" en lugar de "onclick" porque yo hago el JavaScript basado en el estándar de la W3C, que dice que todas las funciones deben ir en el archivo .js y que los receptores de eventos se crean de la forma (por ejemplo):

document.getElementById("objeto").addEventListener ("click", funcion_que_sea, false);

Y en este caso sí que es "click", pero sabía lo que querías decirme ;) De todas formas muchas gracias con lo del cursor y la barra de estado, creo que eso justo me va a solucionar el problema.

¡Saludos!

emprear · #8 (**permalink**) 02/09/2010, 17:56

De acuerdo pero fijate, y es tan solo un ejemplo

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript">
var win= null;
function VentanaCentrada(pagina,w,h,nombre){
var winleft = (screen.width-w)/2;
var wintop = (screen.height-h)/2;
caracteristicas='height='+h+',width='+w+',top='+wi ntop+',left='+winleft+',scrollbars=no,toolbar=no'
win=window.open(pagina,nombre,caracteristicas)
if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
}
</script>
</head>
<body>
<a href="http://google.com/" onclick="VentanaCentrada('http://google.com/','710','548','Popupuno');return false;" > Abrir Popup </a>
</body>
</html>

ese código valida perfectamente para la W3C y no tiene ningún .js externo
asi que debes ser muy preciso con lo que dices

Cita:

que dice que todas las funciones deben ir en el archivo .js

Eso es sólo una recomendación, y se aplica a un Doctype específico

Saludos

dersir · #9 (**permalink**) 02/09/2010, 18:30

Quizás estoy equivocado, yo decía eso porque es lo que me ha parecido entender en http://www.dhtmlya.com.ar. Prestaré más atención a lo que lea en adelante ;)

emprear · #10 (**permalink**) 02/09/2010, 21:30

Si, las páginas de *ya tienen muy buenas guias, más de una vez las he visitado.
A lo que me refiero es que debemos ser muy precisos en nuestros enunciados ya que estamos trabajando sobre lenguajes que no admiten ambigüedades, se que a veces uno tiene muy en claro un concepto en la cabeza, pero a la hora de tratar de explicarlo con palabras no es lo mismo, y terminamos generando confusiones o dando por cierto argumentos que no lo son.

Te pongo un ejemplo, vos decís

Cita:

tampoco se indica la dirección del enlace en la barra de estado del navegador, con lo cual nada indica al usuario que debe hacer click en ese lugar

Analicemos, ¿Sabés cuantos no tienen idea de que en la barra del navegador a veces se ve la url de un link? y digo a veces porque alguien podría usar un link clasico con <a> pero a su vez forzar un mensaje en la barra de estado con javascript. Justamente para hacer una referencia visual de lo que contiene o acciona un elemento existe un atributo (que es comun a la mayoria de los tags), llamado title.

Siempre tené en cuenta que todo esto lo desarrollaron personas que de seguro saben mas que vos, que yo y que la mayoria de quienes posteamos en este foro, y nada es arbitrario. Hay mucho que leer, y perdé cuidado que a mi también me pasa, que en el vértigo por encontrar una solución urgente a algo, no leemos lo suficiente.

Espero no haberme puesto muy pesado, y de seguro ya nos cruzaremos en algún otro post.

Un saludo