Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

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.

Escrito por Manz, el , en html. Comentarios recibidos: 17.

17 comentarios de lectores
Yohnah
Yohnah
1

Yo lo que suelo hacer es con php, pero suelo usar readfile, primero pongo el header para indicar el MIME de la imagen a mostrar (que suele ser image/jpeg) y luego simplemente readfile("ruta/fichero_".rand(1,3)."jpg"); De esta manera solo he de llamar a un único fichero por ejemplo imagen.php. Con una condicional indicando si a la imagen se ha llamado desde tal dirección es una buena manera para ocultar la estructura del arbol de directorios, ya que si no lo llaman por ejemplo desde emezeta.com no se muestre contenido alguno, para que no te chuleen las imágenes tan facilmente (no quiere decir que sea imposible xD)

lordeath
lordeath
2

Pues yo pensaba que estaba mas currao :) mi idea era usar imagemagick para que mezcle el título y la imagen ques egún se te ocurra subas.. algo parecido a lo que hace typo3 con los menús.

Elaine Marley
Elaine Marley
3

Muchas gracias Manz, por la currada que te has pegado!! Me pondré manos a la obra ahora dentro de un ratito a ver cómo me queda!!!

Ruyk
Ruyk
4

Alabado sea el gran Manz, que nos deja caer una gota de conocimiento de su océano de sabiduría

Xangel
Xangel
5

Es una idea estupenda, la voy a utilizar para u trabajo de la Uni...Gracias

Elaine Marley
Elaine Marley
6

Lo he conseguido! Jejejeje. Me ha llevado un ratito investigando pero lo he hecho! Muchas gracias Manz, estoy aprendiendo un monton gracias a ti.

Manu
Manu
7

Con todos mis respetos, lo de evitar copiar la imagen me parece una tonteria puesto que con el Firefox en el menu contextual sin ir mas lejos hay una opcion que dice Copiar URL de la imagen, por mucha ruta relativa que tenga. Respecto a lo del imagemagick o el typo3 me parece comer la sopa con tenedor.

lordeath
lordeath
8

quizá no me he explicado bien. la idea es subir la imagen principal (rotulo emezeta) y luego según se vayan preparando los distintos complemento (clip, steewe, etc etc) en vez de tener en casita que montarlo. mediante una página los dejas montados en el server con image magick (ejecutado desde php). Es por evitar el engorro de tener que andar montando en casa las dos imágenes.

Manz
Manz
9

Excelente ampliación de mostrar imagenes al azar en nuestra web en la página de Sentido Web.

Parra
Parra
10

yo lo use para hacer una marquesina, les dejo el código por si les guta la idea Ruleta De Fotos num = Math.round(Math.random()*4) document.write(''); num = Math.round(Math.random()*4) document.write(''); num = Math.round(Math.random()*4) document.write(''); num = Math.round(Math.random()*4) document.write(''); num = Math.round(Math.random()*4) document.write(''); Es sólo cosa de que lo peguen en un su html o xhtml (mi caso) y listo. Eso sí, acá el rango de fotos va del 0 al 4 y no del 0 al 3; y las imagenes ya no se llaman ",...", sino que ", ...". Espero que le sirva alguien. Muy buen sitio.

Alex
Alex
11

Pocas veces encuentro algo bueno en la red, y realmente este codigo (php) para imagenes es buenisimo y en una sola linea genial!!!!

foxloghan
foxloghan
12

Hola , esto es justamente lo que estaba buscando ... Muchas gracias por el codigo ..

Axel
Axel
13

Gracias, Manz!!!! Varias veces busqué a través de Google soluciones para seleccionar imágenes al azar. Ya conocía las más mencionadas pero sólo aquí encontré el código php que propones!!! Excelente! Es tan simple que a pesar de no saber php pude aplicarla. Muchas gracias!

Razaele
Razaele
14

¡Muchas gracias, Manz! Leí el artículo hace un montón de tiempo (hará uno o dos años), y hasta hoy no he tenido oportunidad de probarlo. He usado el aleatorio por php en la web a la que enlaza el nick, y funciona a las mil maravillas. Como posibles añadidos al artículo, para que con todas las imágenes la web tenga la misma estructura yo las he dado el mismo tamaño. Así la "sustitución" de unas por otras es completa :D . Lo dicho, muchas gracias :). Salud

xmadenyux
xmadenyux
15

Hola! Muchas gracias por el código! Tu explicación fue muy detalla y sin duda es el código más sencillo que he encontrado en todo internet. Mil gracias :)

Qreativos
Qreativos
16

Eso de evitar que se roben una imagen publicada es todo un tema, desde la descarga por parte de cualquier navegador la imagen ya se encuentra en la cache en un formato utilizable y de no ser asi por ejemplo al mostrarla en un .swf bastaria tan solo con imprimir la pantalla y listo, la imagen estaria en memoria para poder usarla en cualquier editor de imagenes, si alguien dice que se puede proteger una imagen esto solo seria a traves de un sistema de marca de agua en la propia imagen que tampoco es infalible y va en perjuicio de su visualizacion.

jonatan
jonatan
17

hola como hago para que en ves de mostrar imagen al azar, muestre un campo de texto diferente cuando actualizo la pagina?. que se mezcle... aca un ejemplo: fijate que no se como hacer que muestre el val inicial al actualizar la pagina: muestra un "value" diferente mezclado: num = Math.round(Math.random()*9) document.write('

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.