Cambiando el color de las celdas con links
Escrito por WebExperto el Lunes 11 de Junio de 2001 a las 00:00hs
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 |
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...
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>
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>
</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.
comentarios
-
Pero ese código no funciona en Firefox