Hacker of the Web
Tus ideas en código!...y mas

Estas en: > > Background o Fondo de página aleatorio
09jul2011

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!

Por: Unknown
En Hace 13 años que se publicó
Etiquetas , , ,
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

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

Emoticons
Comenta con tu:
Comenta:

11 comentarios !

1
Karla Castañeda dijo...

Cool Santy, y muy bien explicadito parpadeo

Saludos Paisano!

Hace NaN años
2
Unknown dijo...

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

Saludos correspondidos paisanalengua !

Hace NaN años
3
omar dijo...

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

gracias

Omar

Hace NaN años
4
Unknown dijo...

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.

Hace NaN años
5
eltorga dijo...

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

rc-zero.blogspot.com

Hace NaN años
6
Anónimo dijo...

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

Hace NaN años
7
Anónimo dijo...

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

Hace NaN años
8
Anónimo dijo...

eu queria aprender aleatorio obrigado

Hace NaN años
9
Anónimo dijo...

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,

Hace NaN años
10
carlos dijo...

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

Hace NaN años
11
jose dijo...

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

Hace NaN años

Blogger mostrar cantidad de en... Nueva interfaz de blogger abie... Página Principal
Arriba