WebExperto.com - Ayuda al Webmaster en Español
 
Cambiando el color a las celdas con links
Autor: Fabian Muller (http://www.webexperto.com) - 17/06/2002

Unos de los JavaScript más solicitados a nuestra redacción fue el de el menú que cambia de color al pasar por encima de él. 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="ver.asp?temav=javascript">Artículos de JavaScript</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="ver.asp?temav=asp"Artículos de ASP</a></td>
</tr>
</table>

Lo marcado en negrita 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.