 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Directorio
|
Manuales
|
Scripts
|
FAQs
|
Programas
|
Artículos Copyleft
|
Actualidad
|
La Cosecha
|
Colabora
Alojamiento
|
Dominios.es
|
Micropagos SMS
|
Buscadores
|
Patentes, marcas
|
Creación web
|
Multimedia
|
Videos
Movimiento de Capas con IE 5,6 NS 6,7
Ejemplo de DHTML, con el cuál podemos crear un movimiento con capas.
11/2/03 - 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
Seguir navegando a partir aquí:
+ 1 manual relacionado+ 2 categorias relacionadas
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Carlos Luis Cuenca*
URL: http://www.helloworldsolutions.com/ Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
Manuales relacionados con este artículo
Dentro de Taller de Javascript
Siguiente: Escritura en las Capas con IE 5, 6, NS 6, 7
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Scripts en Javascript+ Entrar en Scripts DHTML
| Comentarios de los visitantes |
|
Aun no hemos recibido comentarios de este artículo.
Puedes ser el primero en enviar tu comentario. |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
