|
Cambiar
el color de las casillas de los enlaces
Este efecto
resulta muy atractivo y le da mucho prestigio a tu sitio,
hacer que la celda cambie de color al pasar el ratón sobre
ella.
Para lograr
este efecto, primeramente has de poner la página en HTML. Luego
buscas la esta etiqueta: <HEAD>,
que encontrarás en la parte superior de tu página, y no confundas con </HEAD>
que está un poco más abajo.
Ni bien la
encuentras <HEAD>, pegas debajo de la misma este código
(en la parte inferior de la página hallas el código listo para
cortar y pegar, aquí es solo para explicar las acciones):
<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> |
Seguidamente,
debajo de la etiqueta <Body>, vamos a
colocar nuestro código que ejecutará el efecto
deseado. Para ello, debes saber el lugar exacto
donde lo quieres, por eso, si tienes el programa
Front Page, o alguno similar, dibujas una tabla, y
te sitúas en su interior con el cursor (si es
necesario escribir alguna letra, hazlo, y después
la borras), y aprietas la pestaña que te muestra
el código HTML.
Justo
donde encuentras la letra que escribiste, allí
pegas este código que te daré enseguida.
|
<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="index.html"><font face="Verdana"
size="1">Regresar a Inicio</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="ventanaconstruir.htm"><font face="Verdana"
size="1">Ir a Ventana
de Construir</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="web27.htm"><font face="Verdana"
size="1">Leccion
27</font></a></td>
</tr>
</table>
|
Yo puse tres casillas (el primer trozo que escribí
con color negro pertenece a la primera casilla, el segundo trozo que
escribí con azul a la segunda, y el tercer trozo que escribí con
marrón a la tercera casilla), tu puedes copiar este mismo código las
veces que quieras y generarás la cantidad de casillas que desees. Solo
debes cambiar las siguientes variables: 1. Las palabras
que pinté con rojo: las cuales corresponden al nombre que deseas que
aparezca en
la casilla. 2. Lo que pinté con
gris: que es la página
a donde enlaza esta casilla cuando hagan "click" en ella. Voy a explicar ahora como variar los colores y el tamaño de
las letras y casillas, para ello copiaré nuevamente uno de los trozos de arriba
que corresponde a una de las casillas a generar:
<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="index.html"><font
face="Verdana"
size="1">Regresar
a Inicio</font></a></td>
</tr>
|
1. Donde pinté con marrón, es decir, donde dice
size="1", corresponde al tamaño de la letra, por lo tanto si lo
aumentas se te agrandará el tamaño de la letra y la casilla. Por ejemplo, si
le colocas size="10", te quedará una casilla bien grande. Si
colocas "5" quedará mediana, etc. 2. Donde dice:
bgcolor="#475B70",
corresponde al color original que tendrá la casilla en la página antes de
pasar sobre ella el mouse, si deseas varias ese color solo tendrás que cambiar
el código que pinté con gris. Si no sabes códigos de colores, ingresá
por aquí: Click aquí 3.El
código que pinté con azul: onmouseout="mOut(this,'#475B70'),
corresponde al color del que quedará la casilla después que quiten el
"mouse" de sobre ella. Lo puedes variar a elección igual que en el
caso anterior. 5. Lo que pinté con
verde: onmouseover="mOvr(this,'#729233'),
corresponde al color que se pondrá la casilla en el momento en el que pasan el
"mouse" por sobre ella. También lo puedes variar a voluntad como en
los casos anteriores. 6. Lo que pinté
con rojo: width="171",
corresponde al ancho de la casilla, lo puedes variar a voluntad, colocándole el
numero que desees. 
Aquí
tienes el código para pegar debajo de <Head>
listo para cortar y pegar (recuerda que si no te
funciona, debes pegarlo primero en tu block de
notas, y luego tomarlo de allí y pegarlo en tu
página).
Y
este es el código para habilitar la ejecución
del Script, tómalo y pégalo tantas veces como
casillas desees en tu sitio.
Buena
suerte.
|
