| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - WebScript - Tablas - Filas iluminadas
Filas iluminadas
por
Luciano Moreno, del departamento de diseño web de BJS Software.
Iluminación de filas cross-browser.-
Uno de los efectos más usados y que quedan mejor en una tabla es el de iluminación de las filas de la misma cuando vamos situando el cursor encima de ellas. Lo habréis visto en multitud de páginas, pero si estáis usando Netscape 4x como navegador, poco podréis ver, ya que normalmente no funciona el efecto en este navegador.
Esto ocurre porque si trabajamos para Internet Explorer y/o Nestcape 6x, el efecto es bien sencillo de conseguir, basándonos en que en estos navegadores:
1. Las etiquetas table, tr y td admiten eventos.
2. El elemento tr admite cambio de estilos (color de fondo) dinámico
Con estas bases, basta escribir:
<table>
<tr bgcolor=
"yellow"onmouseover="this.bgColor=
'green'"onmouseout="this.bgColor='yellow'">
<td>contenido
de fila</td>
</tr>
</table>
Para conseguir el efecto deseado:
| contenido de fila |
Ahora bien, Netscape 4x no soporta ninguna de las dos propiedaes anteriores, ya que este navegador no reconoce ni las tablas ni las filas como objetos accesibles. Es por tanto necesario, si queremos conseguir un efecto cross-browser, darle vueltas a la imaginación y establecer algún tipo de código compatible.
Podemos aprovechar en primer lugar que Netscape 4x sí que admite el cambio dinámico del color de fondo de una capa, definida mediante las etiquetas div o span. Por lo tanto, si podemos colocar en cada una de las celdas de cada fila una capa, podremos intentar cambiar de golpe el color de fondo de cada grupo de capas contenido en la fila, con lo que podremos conseguir el efecto buscado.
Nos queda pues el conseguir capturar los eventos mouseover y mouseout, encontrándonos con la dificultad adicional que Netscape 4x tampoco reconoce dichos eventos en una capa (salvo que los capturemos a proposito). Entonces la pregunta es: ¿Qué elementos admiten estos eventos en Netscape 4x?. La respuesta inmediata, y que nos va a resolver el problema, son los elementos layer, propios exclusivamente de este navegador.
Efectivamente, la etiqueta layer sí que admite la captura de estos eventos, por lo que vamos a usar un layer en cada una de las celdas de cada una de las filas de nuestra tabla. El esquema final será:
tabla > fila > celda > capa > layer > texto de celda
El código final lo he separado en una página html, con la tabla, y un fichero JavaScript externo, con la función necesaria para la iluminación de las celdas. Los códigos de dichos ficheros son:
tabla_1.html:
<html>
<head>
<title>HTMLWeb. WebScript. Tablas. Filas
iluminadas</title>
<style
type="text/css">
body{cursor:default;}
td{font-size:10px;font-family:Verdana,Helvetica;color:#006600;}
a:link
{font-size:10px;font-family:Verdana,Helvetica;text-decoration:none;color:#cc0000;}
a:visited
{font-size:10px;font-family:Verdana,Helvetica;text-decoration:none;color:#cc0000;}
a:active
{font-size:10px;font-family:Verdana,Helvetica;text-decoration:none;color:#cc0000;}
.letra1{position:relative;clip:rect(0,100%,15,0);font-size:10px;font-family:Verdana,Helvetica;color:#006600;}
.cabecero{font-size:11px;font-family:Verdana,Helvetica;color:#ffffff;font-weight:bold;}
</style>
<script language="JavaScript"
type="text/javascript">
/*
* @ var
filas > nº de
filas de la tabla
* @ var coleumnas > nº de
columnas
*/
var filas=6;
var columnas=5;
</script>
<script language="JavaScript"
type="text/javascript"
src="celdas.js"></script>
</head>
<body
bgcolor="#ffff99">
<table width="700" cellspacing="0"
border="0" cellpadding="0" align="center">
<tr
bgcolor="#006600">
<td width="5%"
height="16"> </td>
<td width="40%"
class="cabecero">Producto</td>
<td width="45%"
class="cabecero">Descripción</td>
<td width="5%"
class="cabecero">Unidades</td>
<td width="5%"> </td>
</tr>
<tr bgcolor="#efefef" id="fila1"
onmouseOver="oscura(1);"
onmouseOut="oscura(0)">
<td
height="15">
<span id="td11"
class="letra1"
style="position:relative;">
<layer width="100%" onmouseover="oscura(1);"
onmouseout="oscura(0)"> </layer>
</span>
</td>
<td>
<span id="td12"
class="letra1"
style="position:relative;">
<layer width="100%" onmouseover="oscura(1);"
onmouseout="oscura(0)">
<a href="#" onclick="alert('enlace inactivo');return false;">Regrabadora
PEPE X-100</a>
</layer>
</span></td>
<td>
<span id="td13"
class="letra1"
style="position:relative;">
<layer width="100%" onmouseover="oscura(1);"
onmouseout="oscura(0)">Regrabadora
100x1500x2000</layer>
</span>
</td>
<td>
<span id="td14"
class="letra1"
style="position:relative;">
<layer width="100%" onmouseover="oscura(1);"
onmouseout="oscura(0)"><center>520</center></layer>
</span></td>
<td>
<span id="td15"
class="letra1"
style="position:relative;">
<layer width="100%" onmouseover="oscura(1);"
onmouseout="oscura(0)"> </layer>
</span>
</td>
</tr>
<tr
bgcolor="#ffffff" id="fila2" onmouseOver="oscura(2)"
onmouseOut="oscura(0)">
<td
height="15">
<span id="td21"
class="letra1"
style="position:relative;">
<layer width="100%" onmouseover="oscura(2);"
onmouseout="oscura(0)"> </layer>
</span>
</td>
<td>
<span id="td22"
class="letra1"
style="position:relative;">
<layer width="100%" onmouseover="oscura(2);"
onmouseout="oscura(0)">
<a href="#" onclick="alert('enlace inactivo');return false;">Disco duro
LOLA 2000</a>
</layer>
</span>
</td>
<td>
<span id="td23"
class="letra1"
style="position:relative;">
<layer width="100%" onmouseover="oscura(2);" onmouseout="oscura(0)">Disco
duro 6800 Gb por
microondas</layer>
</span>
</td>
<td>
<span id="td24"
class="letra1"
style="position:relative;">
<layer width="100%" onmouseover="oscura(2);"
onmouseout="oscura(0)"><center>70</center></layer>
</span>
</td>
<td><span id="td25"
class="letra1" style="position:relative;"><layer width="100%"
onmouseover="oscura(2);"
onmouseout="oscura(0)"> </layer></span></td>
</tr>
<!--...RESTO DE FILAS...-->
</table>
</body>
</html>
celdas.js:
/**
* Fichero JavaScript para la iluminación de filas
en tabla. Cross-browser
* @ Autor: Luciano Moreno http://www.htmlweb.net
* © Luciano
Moreno Prohibido su uso y reproducción sin permiso del
autor
*/
/**
*
Detectamos el navegador y lo asignamos a una variable
global
*/
nc = (document.layers)?
true:false
ie = (document.all)?
true:false
n6 = (document.getElementById)?
true:false
/**
* Función
principal de iluminación
* param n > número
identificador de la fila a iluminar
*/
function oscura(n)
{
/**
* Para Internet
Explorer
*/
if(ie)
{
/**
*
Ponemos cada fila de su
color
*/
for(j=1;j<=filas;j+=2)
{
if(j<=filas)
{
id=('fila'+j)
eval("document.all['"+id+"'].style.background='#efefef'");
}
if(j+1<=filas)
{
id=('fila'+(j+1))
eval("document.all['"+id+"'].style.background='white'");
}
}
/**
* Si
es mouseover iluminamos la fila
correspondiente
*/
if(n!=0)
{
id=('fila'+n)
eval("document.all['"+id+"'].style.background='#ffcc99'");
}
}
/**
* Lo mismo para Netscape
4x
*/
else
if(nc)
{
for(i=1;i<=columnas;i++)
{
<
BR> for(j=1;j<=filas;j+=2)
{
if(j<=filas)
{
id=('td'+j+i)
eval('document.layers[id].bgColor="#efefef"');
}
if((j+1)<=filas)
{
id=('td'+(j+1)+i)
eval('document.layers[id].bgColor="white"');
}
}
}
if(n!=0)
{
for(i=1;i<=columnas;i++)
{
id=('td'+n+i)
eval('document.layers[id].bgColor="#ffcc99"');
}
}
}
/**
* Lo mismo para Netscape
6x
*/
else
if(n6)
{
<
BR> for(j=1;j<=filas;j+=2)
{
if(j<=filas)
{
id=('fila'+j)
eval("document.getElementById('"+id+"').style.background='#efefef'");
}
if(j+1<=filas)
{
id=('fila'+(j+1))
eval("document.getElementById('"+id+"').style.background='white'");
}
}
if(n!=0)
{
id=('fila'+n)
eval("document.getElementById('"+id+"').style.background='#ffcc99'");
}
}
}
/**
* Fin del fichero
*/
Y su efecto lo tenéis en esta ventana.
Consideraciones:
1. Asignamos a cada capa interior (span) una clase, .letra1, en la que le damos un ancho 100% (respecto al td que la contiene), clipeándola para que en Netscape 4x respete ese tamaño total.
2. Cada tr a iluminar lleva asignado un nombre identificador único (id), que sirve para iluminarla directamente en Internet Explorer y Netscape 6x, capturando en dicho elemento los eventos necesarios para ellos (mouseover y mouseout).
3. Identificamos cada capa (span) con un id único, mediante 2 índices, celdaij, que hacen referencia a la fila a la que pertenece (i) y a la columna (j). Le asignamos una posición relativa, ya que si no no podremos acceder a sus propiedades, al considerarlas el navegador elementos simples de definición de bloques.
4. Dentro de cada span metemos una etiqueta layer, que no tiene que llevar identificador alguno, ya que sólo nos va a servir para capturar los eventos necesarios.
5. Ya en el fichero JavaScript, vemos que la función principal lo que hace es recorrer mediante bucles cada una de las celdas de la tabla, poniendo las pertenecientes a una misma fila en su color original, para luego iluminar (poner en color diferente) las celdas (en realidad, las capas span) correspondientes al identificador de fila que recibe como argumento.
6. El evento mouseout llama a la función pasándole como valor del argumento 0, con lo que la función de iluminación no ejecuta el último paso, pero sí que pone todas las filas a su color inicial.
7. Por último, nota cómo hemos definido dos variables iniciales en la página html, filas y columnas, que nos van a servir para fijar el número de elementos que hay que iterar en los bucles de la función de iluminación.