> Manuales > Taller de Javascript

Ejemplo de DHTML, con el cuál podemos crear un movimiento con capas.

Para desplazar una capa por la pantalla, es necesario modificar los atributos Top y Left.

Referencia: Hablamos sobre la función getElementById(), necesaria para entender la manera de trabajar en este artículo, en el documento Capas con Internet Explorer 5, 6, Netscape 6, 7 y Opera

Top define la posición vertical de la capa desde la parte superior de la pantalla

Left define la posición horizontal de la capa desde la parte izquierda de la pantalla.

Al modificar los valores de Top y Left lograremos el movimiento de la capa.

Por último, hay que reseñar que los valores, almacenan una cadena de texto con el valor y las unidades, por lo que es necesario convertir los valores que se almacenan dentro de las propiedades antes de poder utilizarlos.

Por ejemplo, un valor almacenado en top o left podrá ser 140px.

Por este motivo es necesario utilizar la función parseInt para poder convertir los valores a números.

A continuación se muestra un ejemplo, que desplaza una capa 5 pixels cada vez que se pulsa el botón:

La función recibe por parámetro el nombre de la capa que se desea mover, accede mediante la función getElementById a la propiedad de top, mediante ParseInt la convierte a un entero, le suma 5 unidades, y a continuación escribe el nuevo valor en el estilo de la capa.


<script language="Javascript">
function mover(nombreCapa){
valor=document.getElementById(nombreCapa).style.top;
numero=parseInt(valor);
numero+=5;
document.getElementById(nombreCapa).style.top=numero;
}
</script>


Ejemplo completo:

<html>
<head>
<title>Untitled</title>
<script language="Javascript">
function mover(nombreCapa){
valor=document.getElementById(nombreCapa).style.top;
numero=parseInt(valor);
numero+=5;
document.getElementById(nombreCapa).style.top=numero;
}
</script>
</head>
<body>
<div id="capa1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue">Capa 1</div>
<form name="miform" action="#">
<input type="button" onclick="mover('capa1')" value="Mover Capa">
</form>
</body>
</html>


Ver el ejemplo

Carlos Luis Cuenca

Manual