Los dos principales navegadores (Netscape y Explorer) se comportan de forma diferente a la hora de manejar capas creadas con CSS. En este tutorial vamos a ver cómo mover capas en cada uno de ellos y luego un método para trabajar en ambos.

Mover capas en Netscape 4:

Primero creamos la capa con el contenido que queremos desplazar:

<div id="capaamover" style="position:absolute; left:150; top:150" >Texto o imagen a mover</div>

Supongamos que queremos mover la capa a una nueva posición que esté situada a 400 pixels de la izquierda y a 100 de la parte superior:

<a href="#" onclick="document.capaamover.moveTo(400,100)">Pulsa para mover la capa</a>

Si quieres puedes ver este ejemplo. Sólo se verá en Netscape.

Mover capas en Explorer 4:

Explorer 4 no soporta la función .moveTo, así que habrá que mover la capa manualmente.

<div id="capaamover" style="position:absolute; left:200; top:200" >Texto o imagen a mover</div>

Supongamos que queremos mover la capa a una nueva posición que esté situada a 400 pixels de la izquierda y a 100 de la parte superior:

<a href="#" onclick="capaamover.style.pixelLeft=400; capaamover.style.pixelTop=100">Pulsa para mover la capa</a>

Si quieres puedes ver este ejemplo. Sólo se verá en Explorer.

Mover capas en Netscape 4 y Explorer 4:

Para conseguir hacer un script que funcione en ambos definiremos una serie de variables antes, con valores diferentes según el navegador del que se trate:

if(document.getElementById){  // si se trata de Netscape 6
        Refcapa='document.getElementById("'
        Refestilo='").style'
        Reftop='.top'
        Refleft='.left'
}
else if(document.layers){  // si se trata de Netscape 4
        Refcapa='document.'
        Refestilo=''
        Reftop='.top'
        Refleft='.left'
}
else if(document.all){ // si se trata de Internet Explorer 4
        Refcapa=''
        Refestilo='.style'
        Reftop='.pixelTop'
        Refleft='.pixelLeft'
}

Ahora crearemos la función que permita mover capas en ambos navegadores:

function movercapa(capa,x,y){
        eval(Refcapa+capa+Refestilo+Refleft+'='+x)
        eval(Refcapa+capa+Refestilo+Reftop+'='+y)
}

Hemos dado 3 argumentos a la función:
capa - el nombre del identificador (id) de la capa que queremos mover.
x - valor en pixels de la posición izquierda donde se posicionara la capa.
y - valor en pixels de la posición superior donde se posicionará la capa.

Con estos argumentos podremos usar esta función para poder mover diferentes capas.

Una forma de llamar a la función podría ser:

<a href="#" onclick="movercapa('capaamover',300,300)">Pulsa para mover la capa</a>

La función "eval" permite ejecutar cadenas (strings), devolviendo el resultado:

eval(Refcapa+capa+Refestilo+Refleft+'='+xstop)

En el Explorer 4 se verá así: capaamover.style.pixelLeft=300

y en el Netscape 4: document.capaamover.left=300

De esta manera esta función trabajará en ambos navegadores. Aquí podemos ver un ejemplo.

Mover capas repetidamente cada x pixels:

Todo será como antes, bastará sustituir el "=" por un "+=" en la función "moverecapa". De esta manera en lugar de que la capa vaya a la posición indicada por los pixels, lo que haremos es sumarle esos pixels a la posición actual, o restarlos si el valor que pongamos es negativo. De esta manera, cada vez que pulsemos se incrementarán o retsrán estos valores. La función quedaría así:

function movercapa(capa,x,y){
        eval(Refcapa+capa+Refestilo+Refleft+'+='+x)
        eval(Refcapa+capa+Refestilo+Reftop+'+='+y)
}

Si además queremos poder elegir los pixels a sumar o restar horizontal o verticalmente, podemos hacer un formulario con dos cajas de texto para el valor de las "x" y el de las "y". Si al input de las x lo llamamos "Izquierda" y al de las y, "Superior", una forma de llamar a la función, podría ser:

<a href="#" onClick="movercapa('capaamover',document.forms[0].Izquierda.value,
document.forms[0].Superior.value)">Pulsa para mover la capa</a>

Aquí tienes un ejemplo

Mover capas controlando la velocidad:

Ahora haremos unos pequeños cambios sobre la función moverCapa del ejercicio anterior, para poder controlar la velocidad del desplazamiento:

function moverCapa(capa,xstop,ystop,pasos,velocidad){
	if(eval(Refcapa+capa+Refestilo+Refleft)<xstop){
		eval(Refcapa+capa+Refestilo+Refleft+'+='+pasos)
	}
	if(eval(Refcapa+capa+Refestilo+Reftop)<ystop){
		eval(Refcapa+capa+Refestilo+Reftop+'+='+pasos)
	}
	setTimeout("moverCapa('"+capa+"',"+xstop+",
	    "+ystop+","+pasos+","+velocidad+")",velocidad)
}

La explicación de estas líneas sería:

• pasos - Cuántos pixels avanzará la capa en cada movimiento hasta el lugar indicado. Cuánto mayor sea habrá menos movimientos y el desplazamiento será más rápido.
• velocidad - El tiempo de retardo, en milisegundos, entre cada movimiento que ejecuta la función.
• if(eval(Refcapa+capa+Refestilo+Refleft)<xstop){ - Si el valor izquierdo de donde esta esa capa es inferior que el escrito en xstop la capa se moverá a la izquierda.
• eval(Refcapa+capa+Refestilo+Refleft+'+='+pasos) - Esto moverá la capa a la izquierda, los pasos asignados (p. ej. si pasos = 10, la capa se moverá de 10 en 10 px hacia la izquierda). Las 2 líneas siguientes hacen lo mismo pero en sentido vertical.
• setTimeout("moverCapa('"+capa+"',"+xstop+","+ystop+","+pasos+",
"+velocidad+")",velocidad) - Si el valor de la posición izquierda o superior todavía no ha alcanzado los valores indicados en xstop o en ystop, la función seguirá ejecutándose cada vez que pasen los milisegundos indicados en velocidad.

Para llamar a la función podríamos usar esta línea:

<a href="#" onclick="moverCapa('capaamover',300,300,5,10)">Pulsa para mover la capa</a>

Si quieres ver este ejemplo

Una versión más sofisticada, que también puede desplazarse a la izquierda y arriba (el modelo anterior no puede), y en la que podemos cambiar y definir las 4 variables a través de un formulario, se puede ver en el siguiente ejemplo de Bratta en jsworld.com.

Otro ejemplo tipo marquesina, y uno más que se activa automáticamente al cargar la página.

---