HTMLpointHTMLpoint HTMLpoint.com


 Botones activos en JavaScript 2/2



Una vez introducido el código resulta oportuno examinar los pasajes más importantes.

La primera parte del script comprendido entre los Tag <HEAD> establece qué navegadores pueden acceder al documento e interpretar correctamente el código JavaScript.

Antes que nada, hay que precisar que para ocultar el script a los navegadores que no pueden soportarlo, el código se incluye entre campos de comentario:

<!--
// -->


El código incluido entre las marcas <SCRIPT> se elabora después de cargar la página. Así, las funciones se memorizan, pero se ejecutan sólo por lo eventos presentes en la página. El Tag <SCRIPT> está dentro de <HEAD>, que es el lugar destinado a contener los datos relativos al encabezamiento del documento, para que se cargue al principio y garantice que las funciones se interpreten antes de que el usuario efectúe otras operaciones.

"navigator.appName" y "navigator.appVersion" son propiedades sólo de lectura que facilitan respectivamente: el nombre del navegador utilizado en el primer caso y el número de versión en el segundo. Del código se deduce cómo este script es soportado por Netscape 3 y siguiente (>= 3), así como por MS Internet Explorer 4, además de por la última versión de Opera.

La cadena siguiente de código es particularmente importante e invoca las dos imágenes que se pueden ver:

HTMLit1 = new Image(); HTMLit1.src ="imagen01.gif";
HTMLit2 = new Image(); HTMLit2.src ="imagen02.gif";


"HTMLpoint" es el nombre que se asigna al script para que el navegador lo interprete correctamente y es el mismo que está en el código incluido en el Tag <BODY>. La función "active" usa una sencilla instrucción "if" para controlar la condición del script. El operador comparativo "==", da un valor booleano verdadero o falso, como se le ha pedido por la instrucción condicional. Cuando la función "active" se invoca, el navegador muestra "imagen01.gif", mientras la función "inactive" invoca "imagen02.gif".

Dentro del enlace se añaden los dos gestores de eventos: "onMouseOver" y "onMouseOut". El primero se activa cuando el usuario coloca el puntero del ratón sobre el área de enlace; el segundo, cuando éste sale de ella.

La imagen que se coloca en el enlace es "imagen01.gif". También esta imagen tiene que ofrecer una referencia al script, a través del código NAME="HTMLpoint". Sin él, el script no funciona.

A la imagen inicial se le pueden colocar otras al lado sin ninguna restricción, salvo respetar el código JavaScript.

Téngase en cuenta, para un ejemplo clarificador, que hay que incluir dos nuevos enlaces (uno a JavaScript y otro a Html), asociados a botones clicables. En este caso, se tendrán que crear cuatro imágenes, dos para cada enlace:

javascript01.gif
javascript02.gif
html01.gif
html02.gif

Partiendo del código anteriormente examinado, será suficiente con añadir sólo pequeñas partes de código JavaScript. Dentro de los Tag <SCRIPT></SCRIPT> se añade:

Mientras dentro de los Tag <BODY></BODY> habrá que incluir dos nuevas referencias hipertextuales y dos imágenes:
Muestra el ejemplo práctico

El código presentado en este artículo no es el único que puede adoptarse para obtener el efecto típico de los botones clicables, pero está claramente entre los más difundidos y sencillos de personalizar.

Un abuso de este script supone el riesgo de ralentizar muchísimo la velocidad de carga de las páginas. Para evitarlo, se aconseja introducir pequeñas imágenes en formato GIF con el menor número de colores posible.


  Vuelve a principio de página
1997-2000 - Gráfica, layout y guías son propiedad exclusiva de HTMLpoint s.r.l.