link con cambio de color de tabla

BaTuQue · #1 (**permalink**) 26/03/2008, 12:36

Necesito saber como se hace que al situar el cursor sobre una tabla, cambie el color de fondo de la misma y a la vez haga link a otro documento. Utilizo dreamweaver cs3 como editor.

juaniquillo · #2 (**permalink**) 26/03/2008, 13:34

dw no tiene una función propia para eso, pero creo haber visto un ejemplo de eso en el FAQ de javascript.. o lo soñé...¿

?

John_Flyheight · #3 (**permalink**) 26/03/2008, 13:49

Una forma de hacerlo es la siguiente:
- coloca la tabla dentro de un vinculo
- y manupula el color de la tabla con estilos css

*puedes cambiar el color que desees dale a la tabla en
#mitabla:hover{ background-color:#FFFFCC;}
por cualquier color en hexadecimal
aqui un codigo de 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>Tabla con vinculo</title>
<style type="text/css">
#mitabla:hover{ background-color:#FFFFCC;}
</style>
</head>

<body>
<a href="http://www.forosdelweb.com/f17/link-con-cambio-color-tabla-569503/">
<table id="mitabla" name="nitabla" width="400" border="1" onclick="javascript:window.open("http://www.forosdelweb.com/f17/link-con-cambio-color-tabla-569503/");">
<tr>
<td>cualquier</td>
<td>cosa</td>
<td>que </td>
</tr>
<tr>
<td>se </td>
<td>me </td>
<td>ocurra</td>
</tr>
</table>
</a>
</body>
</html>

juaniquillo · #4 (**permalink**) 26/03/2008, 13:57

lo malo de esa forma es que pones un elemento bloque (la tabla) dentro de un elemento inline (el <a>) y eso hace el código html no válido.

John_Flyheight · #5 (**permalink**) 26/03/2008, 16:10

Tienes Razon esta forma no se ajusta al standar
pero varios navegadores lo permiten.

Lo que si funciona correctamente, y se ajusta a la norma
es colocar el vinculo a la tabla con javascript, es decir:

<!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>Tabla con vinculo</title>
<style type="text/css">
#mitabla:hover{ background-color:#FFFFCC;}
</style>
</head>

<body>
<table id="mitabla" name="nitabla" width="400" border="1" onclick="javascript:window.open('http://www.forosdelweb.com/f17/link-con-cambio-color-tabla-569503/');">
<tr>
<td>cualquier</td>
<td>cosa</td>
<td>que </td>
</tr>
<tr>
<td>se </td>
<td>me </td>
<td>ocurra</td>
</tr>
</table>

</body>
</html>

JavierB · #6 (**permalink**) 27/03/2008, 10:06

Movido al foro de JavaScript desde Editores Web.

Saludos,