Páginas

▼

09 julio 2011

Background o Fondo de página aleatorio

Que pasa cuando diseñamos varios fondos para nuestro sitio y no nos decidimos por cual colocar, para esas situaciones tenemos dos opciones: escoger una imagen de fondo y resignarnos o podemos utilizar un sistema que coloque varios fondos de manera aleatoria.

Imágenes Aleatorias

El concepto consiste en que cada vez que alguien ingrese en nuestra página web le aparezca una imagen de fondo diferente. Imágen que es escogida al azar, para ver algo similar puedes hacer clic en el siguiente botón:

La forma mas sencilla de conseguir un fondo de imágenes aleatorias, es con el siguiente algoritmo que acabo de desarrollar en javascript :P !

[1]Agregar un gadget HTML/Javascript que haga el trabajo por nosotros. Con el siguiente contenido: 
<script type='text/javascript'>santyLibBgAleat=function(){this.v="1.0";this.imagenes=function(){var x=arguments,img=this.a(x);this.s(img)};this.a=function(r){var a=Math.random()*r.length;a=Math.floor(a);return(r[a])};this.c=function(b){head=document.getElementsByTagName("head")[0];if(!head)return;var s=document.createElement("style");s.type='text/css';s.innerHTML=b;head.appendChild(s)};this.s=function(b){var o=undefined;b.css=(b.css!==o)?b.css:"";b.url=(b.url!==o)?b.url:"";this.c("body{background:url('"+b.url+"') "+b.css+"}")}};$santyBA=new santyLibBgAleat();
$santyBA.imagenes(
{url:"imagen1.gif"},
{url:"imagen2.png"},
{url:"imagen3.jpeg"},
{url:"imagen4.jpg"}
);
</script>
 [2]Únicamente tendrás que cambiar el texto en azul por la URL de tus imágenes. Puedes agregar mas imágenes repitiendo tantas veces quieras el código: 
{url:"imagen5.jpg"}
 Recuerda que es muy importante separarlas por comas (,). Aplicando un poco de sentido común todos estos códigos son similares y van dentro de: 
$santyBA.imagenes(
  [...AQUI LAS IMAGENES...]
);
 [3]Guardamos el gadget y listo!


Avanzado

Si colocas el algoritmo de arriba repetirá la imagen aleatoria como un mosaico. Pero si tienes una imagen lo suficientemente grande puedes agregar una imagen de la misma manera que lo hice arrba, pero con la diferencia de agregar un poco de css: 
{url:"imagenX.png",css:"no-repeat top center"}
 El código de arriba puedes agregarlo las veces que quieras para darle al algoritmo mas imágenes de donde escoger.

Ejemplo

Aquí muestro un ejemplo de lo que se puede hacer con este algoritmo, mostraré como agregar siete imágenes diferentes. Unas son grandes otras mas pequeñas: 
<script type='text/javascript'>santyLibBgAleat=function(){this.v="1.0";this.imagenes=function(){var x=arguments,img=this.a(x);this.s(img)};this.a=function(r){var a=Math.random()*r.length;a=Math.floor(a);return(r[a])};this.c=function(b){head=document.getElementsByTagName("head")[0];if(!head)return;var s=document.createElement("style");s.type='text/css';s.innerHTML=b;head.appendChild(s)};this.s=function(b){var o=undefined;b.css=(b.css!==o)?b.css:"";b.url=(b.url!==o)?b.url:"";this.c("body{background:url('"+b.url+"') "+b.css+"}")}};$santyBA=new santyLibBgAleat();
$santyBA.imagenes(
{url:"http://santyweb.com/mosaicoVerde.gif"},
{url:"http://santyweb.com/fondoGrande.png",css:"no-repeat top center"},
{url:"http://santyweb.com/fondoIzquierda.jpeg",css:"repeat-y left top #000"},
{url:"http://santyweb.com/fondoCentro.jpg",css:"no-repeat center center"},
{url:"http://santyweb.com/fondoDerecha.jpg",css:"repeat-y right top rgb(156,20,23)"},
{url:"http://santyweb.com/fondoArriba.jpg",css:"repeat-x top left"},
{url:"http://santyweb.com/mosaicoRojo.gif"}
);
</script>

No le entiendes? No te gusta? Es incorrecto?.....coméntalo!

a la/s

13 comentarios:

  1. Karla Castañeda7/11/2011 11:13:00 a.m.

    Cool Santy, y muy bien explicadito ;)

    Saludos Paisano!

    ResponderBorrar
  2. Unknown7/11/2011 03:51:00 p.m.

    Karla, gracias por el comentario. Me esforcé bastante por explicarlo sin ofender a nadie uff :D

    Saludos correspondidos paisana:P!

    ResponderBorrar
  3. omar5/08/2012 03:56:00 p.m.

    una consulta, y si deseo quela imagen esté en full screen? ... ya probé de todo y nada !! ayudenme por favor

    gracias

    Omar

    ResponderBorrar
  4. Anónimo6/24/2012 09:09:00 p.m.

    ¡Buenísimo! ¡Muchas gracias, capo! ^_^

    ResponderBorrar
  5. Unknown7/26/2012 08:54:00 a.m.

    muchas gracias justo lo que buscaba.
    Las otras web me decían lo del primer paso y no me explicaban lo del css asi la tengo como quiero.

    ResponderBorrar
  6. Anónimo8/10/2012 10:11:00 a.m.

    ¡Buenísimo!

    ResponderBorrar
  7. eltorga2/10/2013 10:34:00 a.m.

    Fue de gran ayuda amigo... ahora mi blog luce genial gracias a ti :)

    rc-zero.blogspot.com

    ResponderBorrar
  8. Anónimo7/29/2013 09:01:00 p.m.

    MUCHAS GRACIAS!!!!1 DE VERDAD ME AYUDASTE UN MONTON!!!! :D, ATTE. Yan

    ResponderBorrar
  9. Anónimo10/01/2013 03:19:00 p.m.

    Amigo tremendo blog, eres un genio. Muchas gracias por compartir.

    ResponderBorrar
  10. Anónimo11/16/2013 10:53:00 a.m.

    eu queria aprender aleatorio obrigado

    ResponderBorrar
  11. Anónimo1/05/2014 08:32:00 p.m.

    Hola SäNTÿ,
    Muy claro pero al ponerlo en práctica me ocurre que funciona bien en GoogleChrome y en MozillaFirefox, sin embargo en Internet Explorer NO funciona.
    Lo he revisado bien.
    ¿ Puedes decirme algo (qué añadir a tu estupendo código) para que funcione también en I.Explorer ?

    Muchas gracias,

    ResponderBorrar
  12. carlos4/26/2014 03:35:00 p.m.

    me gusto mucho tu articulo y los demas... eres bueno.

    ResponderBorrar
  13. jose1/30/2016 01:10:00 p.m.

    Muchas gracias amigo, funciona a la perfeccion

    centre la imagen con el codigo :"no-repeat top center"}


    el unico problema que tengo es que al bajar la imagen se queda arriba, hay alguna forma de que se vea siempre centrada cuando bajes? gracias

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.