Cambiando el color a las celdas con links
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:
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.
|
