Test Matemático(V)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Animando las imágenes.-

detectando el navegador usado.-

Ya tenemos las imágenes situadas correctamente y las hemos hecho inteligentes. Vamos ahora a darles marcha, a hacer que se muevan. Esto lo vamos a hacer usando HTML Dinámico. 

Mediante esta tecnología podemos acceder a las diferentes propiedades de una capa, con lo que tenemos la posibilidad de cambiarlas en tiempo real. La única pega es que cada navegador web accede a estas propiedades de una forma diferente (a ver cuando de una vez se establece un estándar y se cumple), por lo que deberemos averiguar qué navegador está usando nuestro visitante, y crear una función que mueva las capas para cada navegador posible.

Para averiguar qué navegador es el que accede a nuestra página vamos a preguntar si este soporta una de las propiedades características de cada uno, que debe ser soportada sólo por él, y por ningún otro, para tener así la absoluta seguridad respecto a cual es.

Para hacer una pregunta que sólo admita una respuesta booleana (si o no), usaremos JavaScript (el HTML Dinámico es la aplicación de este lenguaje a las capas definidas mediante CSS y CSSP). La declaración general a usar es la siguiente:

var variable = (objeto) ? true:false

en ella definimos primero una variable, y le asignamos un valor booleano de acuerdo con la pregunta que vamos a hacer a continuación. En esta, preguntamos si existe un objeto determinado; si es así, la variable definida pasará a valer true, y si no existe el objeto, pasará a valer false.

En el caso que nos ocupa, deberemos preguntar por un objeto que sea soportado por cada uno de los navegadores comunes con los que solemos trabajar. Internet Explorer posee un objeto propio, el objeto all, hijo del objeto document, que no es soportado por ninguna versión de Nestcape Navigator. Para este navegador, las versiones 4x poseen un objeto propio para referirse a las capas de la página, el objeto layers, hijo de document. Y en el caso de las versiones de Nestcape 6x, su forma de referirse a los objetos del documento es mediante getElementById, que aunque tambiés es soprtado por Explorer 5.5, si preguntamos por él el último, lo podemos asociar a Nestcape 6x sin problemas. Con estas consideraciones, el código para distinguir el navegador del usuario queda:

<script language="JavaScript" type="text/javascript">
    var nc = (document.layers) ? true:false
    var ie = (document.all) ? true:false
    var n6 = (document.getElementById) ? true:false
</script>

y con este código ya tenemos el navegador usado por el visitante. La variable nc sólo existe si el navegador es Nestcape 4x, mientras que ie sólo existe si el navegador en Internet Explorer, y n6 sólo será cierta si en navegador es Nestcape 6x.

Para comprobar que va bien la cosa, pulsa el botón siguiente, y te dará el navegador que tú estás usando.

accediendo a las capas.-

Una vez averiguado el navegador con el que vamos a trabajar, debemos acceder ahora a la propiedad de CSSP que maneja la posición horizontal de la capa que contiene la imagen que queremos mover. Esta propiedad es left, que define, como hemos visto ya, la posición de la esquina superior izquierda de la capa respecto al borde izquierdo de la ventana del navegador.

Recordemos que cuando situamos una capa con CSSP establecemos esta posición mediante:

#capa1{position:absolute;left:150px;}

Pués bien, ahora debemos acceder  a esta propiedad de la capa que contiene la imagen con el número 7, de tal forma que vamos a cambiar dinámicamente el valor de left, desplazando la capa a la izquierda un número de pixels determinado. Este número puede ser cualquiera, pero si tenemos en cuenta que queremos crear una animación, tenemos que buscar un número tal que la sensación producida luego al mover esa cantidad de pixels mediante un ciclo dé la sensación de movimiento contínuo, sin saltos ni retardos.

Vamos a acceder a la capa del número 7 y la vamos a mover 10 pixels en cada paso. Para ello deberemos acceder a la propiedad left de 3 formas diferentes, una para cada navegador. El código necesario es el siguiente:

<script language="JavaScript" type="text/javascript">
  var posicion=593;
  function mueve()
  {
    nueva_posicion=posicion-10;     
    if(ie)
      document.all['siete'].style.left=nueva_posicion;
    else if(nc)
      document.layers['siete'].left=nueva_posicion;
    else if(n6)
      document.getElementById('siete').style.left=nueva_posicion;
    posicion=nueva_posicion;
</script>

Vamos a explicar esta función un poco. Primero definimos una variable, posicion, que inicialmente contiene la coordenada left de la capa que contiene al número 7, ya que tenemos que tomar este valor como incio de la animación. Seguidamente definimos la función mueve, y en ella declaramos implícitamente una nueva variable, nueva_posicion, que va a ser la inicial de la capa menos 10 pixels. Por último, accedemos a la propiedad left de la capa en cada uno de los casos de navegador posible, asignamos como coordenada left la definida en la variable nueva_posicion, con lo que desplazamos la capa 10 pixels a la izquierda, y al final asignamos a posicion el valor de nueva_posicion, con lo que al llamar otra vez a la función mueve comenzaremos el ciclo a partir de esta nueva coordenada left.

En el caso de Internet Explorer (var ie) accedemos a la propiedad left mediante:

document.all['siete'].style.left=nueva_posicion;

ya que en este navegador left es un atributo del objeto style, que es hijo del objeto all, hijo a su vez del objeto document. Nota como hemos accedido a la capa siete mediante all['siete'], ya que all es una matriz que contiene todas las capas del documento, y usamos su nombre entre comillas simples porque tenemos que referirnos a la capa mediante su atributo id, pasándole a la función este como cadena de texto.

Para Nestcape 4x, usamos:

document.layers['siete'].left=nueva_posicion;

ya que en este caso no existe el objeto style ni el all, si no que para este navegador todas las capas del documento pertenecen a la matriz layers, y accedemos a una de ellas dándole la ruta (document.layers['siete']) y la propiedad a la que queremos acceder (left). Le pasamos el id de la capa entre comillas simples por la misma causa que a I. Explorer.

En el último caso, para Nestcape 6x, es lo mismo que para Explorer, salvo que ahora las capas no pertenecen al objeto all, si no al objeto getElementById (en realidad, en este objeto Nestcape 6x contienen a todos los elementos del documento, sean capas o no).

El resultado de este código lo podemos ver en la siguiente ventana, donde por cada pulsación sobre la imagen 7 la capa se mueve 10 pixels a la izquierda.