*-* ayuuda-web *-*
  Tutorial
 
  • Introducción: pues empiezo, este es el Primer tutorial que hago para www.mirame--profundo.tk .    En este manual les 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.mirame--profundotk . 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:

HAZ DE HACER CLICK EN EL TEXTO

  • Requisitos de cada función:
    • 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 MIRAME--PROFUNDO.TK a: NOwSPAMebmaster@mirame--profundo.tkquitando lo cursivo, lo que no está en negrita y/o lo que está en mayúsculas . Ahora sí, ejemplos:
    • Mirame--profundo.tk: 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.

¡¡YA PUEDES HACER UN MENÚ COMO ÉSTE!!

Principal
Enlaces
Gifs
Contacto
 
  Hoy habia 1 visitantes (20 clics a subpáginas) ¡Aqui en esta página!
 
 
=> ¿Desea una página web gratis? Pues, haz clic aquí! <=
τσdσs lσs Dεяεcнσs яεsεяvαdσs. cσρчяιgнτ ©2008 | www.mirame--profundo.tk