Cambiando el color a las celdas con links
Fabian - Webmaster de www.webexperto.com
 

Este JavaScript cambia de color las celdas con links al pasar por encima de estas. A continuación le mostramos los códigos y como usarlos.

Para entenderlo mejor, le damos un ejemplo de lo que vamos a explicar:

Artículos de JavaScript
Artículos de ASP

Cómo pueden observar, al pasar por encima del link o celda esta cambia de color. Es algo muy atractivo que le da profesionalismo a un sitio. Vamos con los códigos...

Javascript: debes ubicar el siguiente script en la cabecera de la página (<head> ... </head>)

<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.style.cursor = 'hand';
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.style.cursor = 'default';
src.bgColor = clrIn;
}
}
function mClk(src) {
if(event.srcElement.tagName=='TD'){
src.children.tags('A')[0].click();
}
}
</script>

Menú: estos menúes se realizan mediante una tabla y diferentes celdas, las cuales pueden ser filas o columnas, en este ejemplo veremos filas.

<table>
<tr>
<td onclick="mClk(this);" onmouseout="mOut(this,'#475B70');" onmouseover="mOvr(this,'#729233');" vAlign="center" width="171" style="border-bottom: 1px solid rgb(0,0,0); padding-left: 6; padding-top: 1; padding-bottom: 1" bgcolor="#475B70" height="12"><a style="COLOR: rgb(255,255,255); TEXT-DECORATION: none" href="link1.htm"><font face="Verdana" size="1">Artículos de JavaScript</font></a></td>
</tr>
<tr>
<td onclick="mClk(this);" onmouseout="mOut(this,'#475B70');" onmouseover="mOvr(this,'#729233');" vAlign="center" width="171" style="border-bottom: 1px solid rgb(0,0,0); padding-left: 6; padding-top: 1; padding-bottom: 1" bgcolor="#475B70" height="1"><a style="COLOR: rgb(255,255,255); TEXT-DECORATION: none" href="link2.htm"><font face="Verdana" size="1">Artículos de ASP</font></a></td>
</tr>
</table>

Lo marcado en negrita y azul son los valores hexadecimales de los colores a utilizar. En este caso se pasa a explicar:

#475B70: es el color de fondo principal (bgcolor=".."). Cuando el mouse se para sobre la celda cambia de color y al quitarlo (onmouseout...) vuelve al original.
#729233: es el color de fondo secundario, el cual aparecerá al pasar el cursor del mouse sobre la celda (onmouseover...).

Esperamos que les haya sido útil el artículo, y que usen su imaginación para realizar menúes vistosos.
 
WWW.ELGURUPROGRAMADOR.COM.AR