¡Envia tu foto al Fotomaton!
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.
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.
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.
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:
<div id="logo"></div>
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.
11 Comentarios
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)
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.
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!!!
Alabado sea el gran Manz, que nos deja caer una gota de conocimiento de su océano de sabiduría
Es una idea estupenda, la voy a utilizar para u trabajo de la Uni...Gracias
Lo he conseguido! Jejejeje. Me ha llevado un ratito investigando pero lo he hecho! Muchas gracias Manz, estoy aprendiendo un monton gracias a ti.
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.
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.
Excelente ampliación de mostrar imagenes al azar en nuestra web en la página de Sentido Web.
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.
Pocas veces encuentro algo bueno en la red, y realmente este codigo (php) para imagenes es buenisimo y en una sola linea genial!!!!
en Internet.
Envia tu fotografía al fotomatón de Emezeta. Puedes enviar varias y saldrás en la portada de Emezeta.
Suscripción gratuita
Sigue los artículos de Emezeta blog.
Me llamo José Román, aka Manz. Soy estudiante
de ingeniería informática en la ULL y vivo en Santa
Cruz de Tenerife. Emezeta blog es mi rincón de la red, en él escribo artículos acerca de
tecnología, curiosidades, informática y todo ello sin olvidar el humor.
Si quieres saber más sobre mi, haz clic en ¿Quién es Manz?. Si lo deseas, también puedes ver mi CV o enviarme un mensaje para contactar conmigo.
Si te interesa el contenido de Emezeta blog, puedes suscribirte en Bloglines, Google o cualquier otro sindicador de contenidos.
Puedes recibir los artículos directamente en tu e-mail si lo deseas:
Si quieres dejar un comentario acerca del artículo, pulsa aquí. Mediante este formulario enviarás un e-mail privado al autor del blog (tu mensaje no será publicado en este sitio). Asegurate de escribir tu e-mail para poder responderte:
¡OJO! Me encanta recibir emails pero no me da tiempo de contestarlos todos. ¡Paciencia! Aunque tarde, siempre los contesto.
phynetNah, la cosa es Febrero 19 de 2008 xD Pero visto así, impresiona......
JavierSaludos a todos. Si se dan cuenta la fecha es 19 de febrero de 2008, utilizaron 2 ...
Nacho 001Madre mia.......
dayaniKiero poenr mi foto en photoshop y no puedo ayudenme porfavor :( ...
FaustoLo del tiempo de espera se puede solucionar aumentar le tiempo de espera en Herram...
¿Quieres anunciar un producto? Sé analizado en Emezeta blog mediante la red Zync. Emezeta blog tiene más de 650.000 páginas vistas al mes.
Muestra fotos o webcam.
Tus fotos en la portada de una revista:
Si te gusta este sitio, puedes colocar un enlace a Emezeta blog en tu página web o blog, pegando el siguiente código:
Alojado en MediaTemple.
10 consultas efectuadas / Página generada en 0.041 segundos
Programado íntegramente por José Román (Manz) en XHTML y CSS estándar.
Sindicado bajo Feed RSS. Contenido bajo licencia Creative Commons
Estadísticas de visitas · Términos y condiciones · Contacto · Publicidad · Preguntas frecuentes (FAQ)
