Un menú con efectos ( Gracias a RaPPeR099 )En linea
Introducción:
pues empiezo,
este es el segundo tutorial que hago para www.creatupropiaweb.com. En este manual os explicaré como hacer cambio de colores en
celdas o tablas, hago este manual porque leí en el tag-board de esta
web a un usuario que creía que era flash y, sólo es un efecto más de
javascript:
Figura 1:
HAZ CLICK EN
ALGUNA PARTE DE ESTA TABLA
El código:
este es el código para el efecto,
lo que hace es crear dos funciones. Una se llama mOver que es
la que cambia de color cuando se usa cuando el ratón pasa por encima de la tabla, celda,
étc. Otra es mOut que es la que se usa cuando el ratón sale,
las otras dos siguientes son para cuando se presiona cualquier boton del raton (¡incluso
el scroll!) cuando se presiona y cuando se suelta y la última irA
hace que la tabla/celda al presionar vaya a otra página, es
decir como un enlace o link.
Aplicar el código:
pues
para aplicar el efecto a tablas (este código no sirve para formularios,
más abajo pondré como dar efecto a los formularios como arriba). Imaginemos
que quieres hacer una tabla como la primera (Figura 1). Pues el código
sería este:
Aquí se ve el ejemplo...
el evento onClick
es cuando se pincha en la tabla (en este caso), onMouseOver
es cuando el raton pasa por encima, onMouseOut
cuando sale de la tabla, onMouseDown
cuando se presiona cualquiero boton del ratón y onMouseUp
cuando se suelta. El font no hace falta convertirlo en enlace, ya que
si pulsas en la tabla va directamente a, en este caso, http://www.creatupropiaweb.com.
He puesto esa función porque no queda bien que la tabla cambie de color
pareciendo que si pinchas irás al enlace, si usas este código para un menú
como en este caso:
mOver(this,'#color'):
el parámetro this estará en todas las funciones (menos irA) y no se deberá
cambiar, lo contrario a '#color' que se pondrá el código
HTML del color o el nombre por ejemplo red, green, blue... e
irá siempre entre comillas simples.
mOut(this,'#color'):
igual que mOver.
mUp(this,'#color'):
igual que mOver.
mDown(this,'#color'):
igual que mOver.
irA(enlace,target):
en enlace deberá ser una URL siempre entre comillas simples (''),
y el parámetro target es opcional, si tienes frames pues 'centro'
por ejemplo, si lo quieres en una página nueva '_blank' (aunque
si no se pone este parámetro abrirá el link en una página). Si quieres
más comodidad y tienes una página con frames y es pesado tener que
poner siempre el target puedes hacer una sencilla modificación del
código: (has de cambiar lo primero por lo segundo y en lo segundo
FRAME por el nombre del frame sin quitar las comillas.)
Este efecto en
formularios: para
esto, en los parámetros que he explicado antes (onMouseOut, OnClick,
etc) deberás poner esto: this.style.backgroundColor='#ff0000';. Por
ejemplo: onMouseOut="this.style.backgroundColor='#ff0000';".
Ejemplos:
si
has utilizado este efecto en tu página enviale el enlace al webmaster
de CREATUPROPIAWEB.COM a: NOwSPAMebmaster@creatupropiaweb.comquitando lo cursivo, lo
que no está en negrita y/o lo que está en mayúsculas .
Ahora sí, ejemplos:
CreaTuPropiaWeb.com:
esta web también usa este efecto aunque no con este código exactamente
aunque la mayoría de las funciones son las mismas.
Sugerencia:
Efecto redondeado: con
dos simples imágenes se puede hacer esto:
Haz ésta tu página de inicio
Simplemente es una tabla
con tres
columnas, en las de los extremos van imágenes redondeada con los picos del
color del fondo de la página, o de donde vaya y el resto transparente.
Puedes usar estas imágenes:
<--
¿La ves?
¿La
ves? -->
Recuerda que
para hacer esto con las imágenes has de poner en <table>
los parámetros cellspacing
con valor 0 y cellpadding
con valor 0, y sin borde, es decir el parámetro border con valor 0 también,
de manera que quede así: <table cellspacing="0" cellpadding="0"
border="0">. Junto a los "on" (onMouseOver,
étc.)
Cambiar el cursor: si quieres que al pasar por la tabla,
celda o lo que sea se ponga otro cursor, deberás añadir en el código
detrás de src.bgColor = clrOver; esto otro: mOvr: src.style.cursor
= 'hand';. Y en mOut lo mismo pero en vez de hand pon default
o el cursor que sea. Si tienes otro cursor puesto por ti, pues tal como
viene en la sección javascripts. url(archivo.cur).
Outroducción:
aquí
acabo el tutorial, espero que os haya resultado sencillo y que no os
hayáis comido mucha la cabeza por no explicarme bien... alguna duda,
sugerencia, étc. a NOjimSPAMenez.jm@terra.es.
Quitando lo mismo que en el e-mail anterior.
En linea
.
Ahora sí, ejemplos:
