Con DHTML o HTML Dinámico podemos entre otras cosas, modificar, ocultar, mostrar, cambiar apariencia o animar el contenido dinámicamente. Es decir, permite cambiar el código del lado del cliente (la página final que se ve en el navegador).
Una página de HTML Dinámico es cualquier página web en la que los scripts en el lado del cliente cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la página. La caracterÃstica dinámica del DHTML, por tanto, es la forma en que la página interactúa con el usuario cuando la está viendo, siendo la página la misma para todos los usuarios.
Para mover elementos dentro de otro de tipo div sin que se salgan del mismo, hay varias formas, desde usar alguna librerÃa externa para darle efecto a la imagen controlando asà sus lÃmites, hasta usar el abanico de funciones que nos provee el DOM.
Meteremos una imagen dentro de un div y la dejaremos en movimiento continuo, nos aseguraremos de que la misma no se salga del elemento contenedor.
En nuestro archivo de ejemplo index.html, luego de la etiqueta <Head> colocamos lo siguiente:
La función getElementById que nos provee el DOM, nos devuelve una referencia a los elementos indicados de manera que podamos acceder luego a su propiedades.
Para asignar los nuevos valores top y left, generamos un número aleatorio haciendo uso del método random de la clase Math de Javascript, como el numero aleatorio estará comprendido entre 0 y 1, multiplicamos ese resultado por el máximo de valores permitidos que en este caso es el ancho y alto del elemento div contenedor.
La posición nueva de la imagen será una coordenada XY, debemos restarle a los valores ancho y alto del div, los de la imagen, respectivamente, para que ésta no quede fuera en caso de que las coordenadas obtenidas estén bastante cerca de la esquina inferior derecha del contenedor.
La función setTimeout() de JavaScript permite retrasar la ejecución del script en milisegundos, el primer parámetro es la función a ejecutar luego de que se cumpla el tiempo pasado como segundo parámetro.
Luego, antes de la etiqueta </head> colocamos lo siguiente:
<style type="text/css">
#miDiv{
margin: auto;
width: 500px;
height: 500px;
border: #c1930b 2px dashed;
}
img {
position: relative;
width: 100px;
height: 100px;
}
</style> y luego de la etiqueta </head>, asÃ:
<body onLoad='ImgMove();'> <div id='miDiv'><img id='img' src='imagen.jpeg' /></div> </body>Con el evento onLoad llamamos a la rutina ImgMove cuando la página termine de cargar por completo, luego esta se llama asà misma no sin antes haber establecido la nueva posición de la imagen.
Ver ejemplo
- Los comentarios están siendo moderados y serán publicados en la brevedad posible.