HTMLpointHTMLpoint HTMLpoint.com


 Botones animados enlaces... 2/2  

 por Massimiliano Valente

Una vez impostada la hoja de estilo, pasamos al código comprendido entre las marcas <SCRIPT></SCRIPT> del encabezamiento del documento.

Para verificar que el navegador utilizado sea compatible con la demo impostamos un simple control:

var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;


La primera línea de código se refiere a Netscape, que tiene acceso a todos los layer del documento, mientras que la segunda línea se refiere a Ms Internet Explorer, que tiene acceso a todos los objetos del documento. La presente demo es totalmente compatible con Netscape 4 o superiore y MsIe4 o superior.

El código sucesivo imposta los objetos crossbrowser del documento y debe ser modificado en ningún punto. En particular, se impostan las funciones: makePageCoords, makeObj, b_showIt, b_moveIt y preLoad.

La línea de código que figura a continuación expresa la altura (height) en píxel de las imágenes:

var imageHeight=25

Es importante señalar que si modificamos la altura de las imágenes en esta porción de código, deberemos hacer lo mismo en el área #divBottomCont impostada en la hoja de estilo que abre el documento.

Los botones que activan los enlaces y el efecto dinámico en las imágenes están determinados por el código:

pre=new preLoad(6,'','')
preb=new preLoad(6,'','_b')

El valor numérico 6 es igual al número de botones insertados en el ejemplo. Para añadir o eliminar botones, basta aumentar o disminuir dicho valor sustituyéndolo por el número correspondiente.

La primera línea de código imposta los botones activos al abrir la página y cuando el ratón está fuera del área de enlace, mientras que la segunda invoca las imágenes activadas con el efecto onMouseOver. El valor "_b" indica que las imágenes activadas cuando pasa el ratón tienen que diferenciarse de las primeras por la presencia en el nombre de este carácter: así pues, 1.gif se convierte en 1_b.gif, 2.gif en 2_b.gif., etc.)

La velocidad de desplazamiento vertical de las imágenes queda impostada por la línea de código:

var mspeed=10

Cuanto más bajo es el valor, mayor es la velocidad de desplazamiento y, al contrario, cuanto más alto es el valor, más lento es el movimiento.

La función Init() determina la posición de las imágenes en la página:

oBButtons.moveIt(page.x2-500,150)
oBCont.moveIt(oBButtons.x-150,150)


El primer valor x2 es la distancia en píxel de los seis botones al margen izquierdo de la página. El otro valor, Y2, indica la distancia de los mismos al margen superior. La segunda línea e código se refiere a la posición del layer que recoge las imágenes en movimiento vertical. La distancia entre los botones y las imágenes en movimiento debe tener en cuenta la disposición horizontal del menu. Esto significa que los botones estarán más distanciados del margen izquierdo para no superponerse a las demás imágenes.

Las dos funciones sucesivas: function mover(num){oBButtons.ref["img"+num].src=preb[num].src; moveTo(num)}
function mout(num){oBButtons.ref["img"+num].src=pre[num].src; moveBack()}


impostan el efecto onMouseOver y OnMouseOut en los botones.

Las funciones moveTo y moveBack mueven el layer de las imágenes en dirección vertical según si el ratón está fuera o dentro del área de enlace de los botones.

Hasta aquí hemos analizado el código que hay que insertar en el encabezamiento del documento. En el BODY del documento se insertan referencias a los layer impostados precedentemente: divBottomCont, divBottomText y divBottomButtons.

Las imágenes en movimiento vertical son invocadas por el siguiente código:

La imagen visualizada por defecto es text0.gif, mientras que las otras se superponen la una a la otra en posición vertical. Su anchura es indiferente en el sentido de que pueden ser distintas entre sí aunque no deben superar el área de layer 150 píxel. Es diferente por lo que respecta a la altura: para evitar desastrosos efectos gráficos debemos mantenerla en 25 píxel.

El código sucesivo se refiere a los botones clicables a la derecha del ejemplo:

Los gestores de eventos onmouseover y onmouseout invocan, respectivamente, las funciones mover y mout.

La personalización de la demo es relativamente sencilla, si bien pasa a través de la modificación de las imágenes con programas de retoque de fotos tales como Paint Shop Pro o Photoshop.


  Vuelve a principio de página