Como los demás elementos HTML, las capas se pueden crear y modificar mediante JavaScript. Para poder hacerlo existe un objeto llamado layer que contiene todos los atributos de las capas y varios métodos para modificarlos. Son los siguientes:

Atributos Descripción
name El nombre de la capa que se definió con el parámetro ID.
parentLayer El objeto layer de la capa que contiene esta. Si no existe ninguna será el objeto window.
top, left, pageX y pageY; style.top y style.left Sitúan la esquina superior izquierda de la capa dentro del documento.
clip.left, clip.right, clip.top, clip.bottom, clip.height y clip.width; posWidth y posHeight Permiten modificar el área que se podrá ver dentro de una capa.
zIndex; style.zIndex Define el orden en el eje Z de la capa con respecto a las que están contenidas en la misma capa padre.
above y below El objeto layer inmediatamente encima o debajo de este o null si este es el que está encima (o debajo) de todos los demás.
siblingAbove y siblingBelow El objeto layer que comparte el mismo padre inmediatamente encima o debajo de este o null si este es el que está encima (o debajo) de todos los demás.
visibility; style.visibility Define si la capa es visible o no. Puede tomar los valores visible, hide o inherit.
background URL del gráfico de fondo (si lo hubiera) de la capa.
bgColor El color de fondo de la capa o null si fuese transparente.
src URL del contenido de la capa, en caso de que este se defina en otro documento HTML.

Los atributos en cursiva son aquellos que no pueden ser modificados por el usuario. Los resaltados en verde sólo se podrán usar con Netscape, los rojos con Explorer y los que están en negro son comunes. Los métodos (que yo sepa, sólo disponibles en Netscape) son los siguientes:

Métodos Descripción
moveBy(x,y) Mueve la capa x pixels en el eje horizontal e y en el vertical.
moveTo(x,y) y moveToAbsolute(x,y) Mueven la capa a la posición (x,y). En el caso de moveTo se cambian los atributos left y top y, con moveToAbsolute, se modifican pageX y pageY.
resizeBy(anchura, altura) Aumenta el tamaño de la capa según los pixels que definan sus parámetros (en caso de ser negativos disminuirá).
resizeTo(anchura, altura) Define el tamaño de la capa.
moveAbove(capa) y moveBelow(capa) Colocan la capa encima (o debajo) de la capa dada como parámetro.
load(URL, anchura) Leen el contenido de la capa del URL especificado, cambiando a la vez la anchura de la misma.



Parece desgraciadamente lógico que, si nos obligan a conocer distintos atributos del objeto layer en cada navegador, también nos obliguen a acceder a ellos de forma distinta Accediendo a las tablas de capas de esta manera:

Netscape Explorer 
document.layers["micapa"]
document.all["micapa"]

accederíamos a la capa que hayamos denominado micapa, pudiendo modificar sus propiedades de esta forma:

Netscape Explorer 
document.layers["micapa"].left=100
document.all["micapa"].style.left=100

En el caso de que micapa tuviese capas hijo, accederíamos a ellas por medio del objeto document incluído a tal efecto dentro de micapa tal que así:

Netscape Explorer 
document.layers["micapa"].
document.layers["hijodemicapa"]
document.all["micapa"].
document.all["hijodemicapa"]

Como resultaría muy lioso estar poniendo un if cada vez que quisieramos acceder a una capa, resulta más elegante utilzar la función eval combinada con funciones y variables que devuelvan la cadena de caracteres que corresponde a la función deseada en cada navegador. El código siguiente es el que yo utilizo en el fichero general.js, que leen todas las páginas de este curso que quieren utilizar capas: 

var referenciaEstilo;
var capaVisible;
var navegador;
if (navigator.appName == "Netscape") {
  referenciaEstilo = "";
  capaVisible="show";
  navegador = "Netscape"; }
else {
  referenciaEstilo = "style.";
  capaVisible="visible";
  navegador = "Explorer"; }
function referenciaCapa(nombreCapa) {
  if (navegador=="Netscape")
    return "document.layers['"+nombreCapa+"'].";
  else
    return "document.all['"+nombreCapa+"'].";
}

Existen varios controladores de eventos que se pueden incluir dentro de la etiqueta <LAYER>. No los voy a describir aquí, porque ya lo hice en el curso de JavaScript, sólo voy a nombrarlos. Son onMouseOver, onMouseOut, onFocus, onBlur y onLoad.

Sin embargo, si lo que queremos hacer es HTML dinámico interpretable tanto por Netscape como por Explorer, no podremos hacer uso de la etiqueta <LAYER>. La única manera de manejar eventos en este caso consiste en utilizar los controladores de eventos de los elementos que estén dentro de la capa, o encerrar ésta en un elemento con controladores, como podemos ver en el siguiente ejemplo: 

<HTML>
<HEAD>
  <STYLE TYPE="text/css">
    #ocultar1 { position: absolute; visibility: visible; width:300px;
                background-color:yellow; z-index:10005;}
    #ocultar2 { position: absolute; visibility: visible; width:300px;
                background-color:red; z-index:10000;}
    #cambiar  { position: absolute; visibility: visible; width:300px;
                left:400px;}
  </STYLE>
  <SCRIPT LANGUAGE="JavaScript">
    function ocultarCapa(nombreCapa) {
      eval(referenciaCapa(nombreCapa)+referenciaEstilo+
         'visibility = "hidden"');
    }
    function mostrarCapa(nombreCapa) {
      eval(referenciaCapa(nombreCapa)+referenciaEstilo+
         'visibility = "visible"');
    }
    function cambiarColor() {
      if (eval(referenciaCapa("ocultar1")+referenciaEstilo+
            'visibility == "'+capaVisible+'"'))
        ocultarCapa("ocultar1");
      else
        mostrarCapa("ocultar1");
    }
  </SCRIPT>
</HEAD>
<BODY>
  <DIV ID="ocultar1">
    <P>Mi color, tu color, nuestro color...
  </DIV>
  <DIV ID="ocultar2">
    <P>Mi color, tu color, nuestro color...
  </DIV>
  <DIV ID="cambiar">
    <FORM>
      <INPUT TYPE=BUTTON NAME="Boton" VALUE="Cambia el color"
        onClick="cambiarColor()">
    </FORM>
  </DIV>
</BODY>
</HTML>

Mi color, tu color, nuestro color...

Mi color, tu color, nuestro color...





La manera de hacer animaciones, si has seguido hasta aquí ambos cursos, debería resultar clara. No consiste más que en cambiar los atributos de visibilidad y la posición de las capas en el orden adecuado que requiera la animación que estés realizando. Para poder realizarlo necesitaremos controlar el momento en que se hacen estas cosas y, para hacerlo, usaremos de nuevo la función setTimeout. Como ejemplo vamos a realizar un scroll en pantalla:

Esto se mueve...

El código para hacerlo es el siguiente: 

<HTML>
<HEAD>
  <STYLE TYPE="text/css">
    #scroller { position: relative; visibility: visible;
                left:-100px; width:100px;}
  </STYLE>
  <SCRIPT LANGUAGE="JavaScript">
    var posicion=100;
    function moverCapa() {
      if (posicion != (screen.width+100))
        posicion+=2;
      else
        posicion=-100;
      eval(referenciaCapa("scroller")+referenciaEstilo+'left ='+posicion);
      setTimeout('moverCapa()',2);
    }
  </SCRIPT>
</HEAD>
<BODY>
<DIV ID="scroller">
  <P>Esto se mueve...
</DIV>
</BODY>
</HTML>
De todos modos veremos ejemplos más complejos en el siguiente capítulo.