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.
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.
Autor: Fabian
http://www.webexperto.com
Usuarios que han visto este tema también han visto...
- Efecto Nieve
- Precarga de imagenes en Javascript
- Mensaje de alerta la cargar la página con Javascript
- Adapta tus páginas a todas las resoluciones
- Precargar Imagen con JavaScript
- Versión imprimible de este documento
- Enviar por e-mail este documento
