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.

julio.soler

Aspirante a informático, colaboro en varios blogs entre ellos ZonaMasters. Para más información sobre mi consulta mi blog personal :: El WebLog de Julio Soler :: en www.juliosoler.es :)

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>