Cabeceras dinámicas con JavaScript
Una forma de darle un aspecto más dinámico a nuestra página, sería mediante el uso de código JavaScript para generar, por ejemplo, cabeceras dinámicas. Cada vez que un visitante entre a nuestra página le aparecerá una imágen distinta y para ello debemos insertar el siguiente código dentro de la etiqueta “head” del código HTML o dentro de una etiqueta “style” para que se elija la cabecera aleatoria:
<script type=”text/javascript”>
img = new Array(6)
img[0] = “http://URL_imagen1.jpg”
img[1] = “http://URL_imagen2.jpg”
img[2] = “http://URL_imagen3.jpg”
img[3] = “http://URL_imagen4.jpg”
img[4] = “http://URL_imagen5.jpg”
img[5] = “http://URL_imagen6.jpg”
aleat = Math.random() * (img.length)
aleat = Math.floor(aleat)document.write(”);
document.write(’#header { background-image: url(’ + img[aleat] + ‘) !important }’);
document.write(”);
</script>
El uso del código JavaScript es bien sencillo. Primero se declara el array (importante indicar el tamaño) que contendrá todas las imágenes que queremos utilizar para la cabecera, después mediante una función matemática se genera una posición aleatoria del array y por último el código JavaScript escribirá el código CSS pertinente con el que se obtendrá la imagen que haya sido seleccionada.
Escrito por julio.soler el 30 de Junio de 2007 con 2 comentarios
Enviar a un amigo por E-Mail
Lee más artículos sobre Diseño Web y Herramientas Webmasters y JavaScript y Recursos Webmasters.
