Imagen al azar para nuestra web
Muchas personas me han preguntado como pueden hacer una cabecera de logotipo al estilo de Emezeta.com que vaya variando al azar, para mostrar una distinta en cada carga de la página.
Como ya es hora de dejar de hacerse el remolón, voy a intentar explicarlo de forma sencilla para que todos aquellos sin conocimientos de programación puedan usarlo en su web sin problemas.
Lo primero es tener las imagenes preparadas. Después de diseñarlas las ubicaremos todas en nuestra página web con un mismo nombre, pero variando el número del final: imagen1.jpg, imagen2.jpg, imagen3.jpg... Asi pues, éstas imagenes estarán disponibles en una hipotética dirección de nuestra web: http://www.paginaweb.com/img/imagenX.jpg.
PHP
Ya tenemos todo preparado, solo nos falta realizar el código para cargarlas aleatoriamente. El lenguaje HTML no nos brinda ninguna posibilidad para hacer esto, asi que necesitaremos otro lenguaje. El ideal -que la mayoría de servidores lo soportan- es el lenguaje PHP. El código sería algo tan sencillo como incluir el siguiente trozo de HTML:
<img src="http://www.paginaweb.com/img/mz/imagen<?php echo rand(1,3); ?>.jpg" alt="Pagina web">
Con este código estamos consiguiendo que se cargue una imagen al azar entre 1 y 3, es decir, imagen1.jpg, imagen2.jpg o imagen3.jpg. Solo debemos incrementar este número al de imagenes que tengamos.
Javascript
Pero puede ocurrir que nuestro servidor sea más decentito, y no tenga soporte de PHP. No hay problema, el javascript puede hacernos salir del paso ya que es un lenguaje a nivel de cliente y no de servidor como PHP, lo que significa que todo usuario con un navegador moderno lo podrá interpretar. Bastaría con incluir el siguiente código en la parte donde queremos ubicar la imagen:
<script type="text/javascript">
num = Math.round(Math.random()*3)
document.write('<img src="http://www.paginaweb.com/img/imagen' + num + '.jpg" alt="Pagina web">');
</script>
Este código realizado en Javascript, hace lo mismo que el anterior, con alguna diferencia aparente pero mismo efecto.
CSS
Por último, puede ocurrir que nosotros la imagen que queremos variar la tengamos incluida en un fichero CSS externo (hojas de estilo). En este caso tendremos algo parecido a esto:
En el fichero HTML:
<div id="logo"></div>
En el fichero CSS externo:
div#logo {
width : 500px;
height : 180px;
background : url(http://www.paginaweb.com/img/imagen1.jpg);
}
En este caso lo que haremos es combinar una de las dos opciones anteriores, pero con algunos cambios. Lo primero será buscar en el código HTML la sección de cabecera, (entre los tags head):
<script type="text/javascript">
num = Math.round(Math.random()*3)
document.write('<style type="text/css">');
document.write('div#logo { background: url(http://www.paginaweb.com/img/imagen' + num + '.jpg)!important }');
document.write('</style>');
</script>
Este último ejemplo -el más complejo- lo que hace es sobreescribir la hoja de estilo externa, generando automáticamente por javascript el código al azar necesario. Habría que andar cuidadosos con el nombre de la capa div (en este caso logo) que quizás se llame de otra forma, no sea una capa sino otro elemento, etc...
Espero que así haya echado una mano y sirva de ayuda a todos aquellos que le haya interesado el tema de colocar una imagen al azar en nuestra página web.