Fondo cambiante

Enjuto · #1 (**permalink**) 28/04/2008, 01:48

Hola, muy buenas.

Lo primero, cómo no, agradecer vuestra ayuda. (Qué menos que agradecer...).

Ahora, mi duda: Quisiera hacer que el fondo (background) de mi página cambiara aleatoriamente entre una serie seleccionada de fondos, pero no en cada visita, sino sólo alguna vez, a modo de "premio" por visitar. Es decir, mantener un fondo habitual, y que en alguna visita cambie.

...Espero haberme explicado bien...

¿Cómo podría hacerlo?

Saludos.

Hitsu · #2 (**permalink**) 28/04/2008, 13:26

La única forma que le encuentro a este problema es utilizando base de datos, que cuente cuantas veces el usuario se ha conectado desde su misma IP (será difícil que funcione con IP, asi que recomiento una forma de registro via sql, en la cual cuente cuantas veces x usuario se ha conectado y hacer en php algo como:

if($connections >= 50) {
<body background="imagen+50.jpg"...........
} else {
<body background="imagen-50.jpg"............
}

Otra forma de hacerlo sería a base de cookies, pero no es muy confiable ya que las cookies aveces son eliminadas por la misma computadora o por el usuario.

Enjuto · #3 (**permalink**) 28/04/2008, 17:08

Agradezco enormemente la respuesta, pero me gustaría, a ser posible, algo más aleatorio. No necesariamente cada X número de visitas. Que sea más como una sorpresa, ya sea a la visita número 50 o a la segunda.

No sé si pido demasiado... Ciertamente soy un ignorante en estas lides...

bookmaster · #4 (**permalink**) 28/04/2008, 19:29

Yo esto lo haría con PHP metiendo en la zona del CSS lo siguiente:

Código PHP:

  <?php
$Imagen = rand(1,5); // Uso de rand(): rand(Valor minimo, Valor maximo);
echo "body{";
switch($Imagen){
    case 1:
        echo "background-image: url('Fondo1.jpg'); ";
    break;
    case 2:
        echo "background-image: url('Fondo2.jpg');";
    break;
    case 3:
        echo "background-image: url('Fondo3.jpg');";
    break;
    case 4:
        echo "background-image: url('Fondo4.jpg');";
    break;
    case 5:
        echo "background-image: url('Fondo5.jpg');";
    break;
    default:
        echo "background-image: url('Fondo.jpg');";
    break;
}
echo "}";
?>

Y una versión mas reducida en PHP:

Código PHP:

  <?php
$Valor = rand(0,5); // Uso de rand(): rand(Valor minimo, Valor maximo);
$Imagenes = array("Fondo.jpg" , "Fondo1.jpg" , "Fondo2.jpg" , "Fondo3.jpg" , "Fondo4.jpg" , "Fondo5.jpg");
echo "body{ background-image: url('".$Imagenes[$Valor]."')};";
?>

Si no se puede usar PHP pues el código en JavaScript sería algo parecido a esto:

Código HTML:

<script language="javascript">
var Imagen;
Imagen = Math.round(Math.random()*5 + 1); // Uso de Math.random(): Math.random()*Numero Maximo + Numero Minimo;
switch(Imagen){
	case 1:
		document.write="body{ background-image: url('Fondo1.jpg');}";
	break;
	case 2:
		document.write="body{ background-image: url('Fondo2.jpg');}";
	break;
	case 3:
		document.write="body{ background-image: url('Fondo3.jpg');}";
	break;
	case 4:
		document.write="body{ background-image: url('Fondo4.jpg');}";
	break;
	case 5:
		document.write="body{ background-image: url('Fondo5.jpg');}";
	break;
	default:
		document.write="body{ background-image: url('Fondo.jpg');}";
	break;
}
</script>

Este de JavaScript no lo he probado ya que no suelo cambiar el fondo de la página con este método.

Pero vamos que si puedes usar PHP mejor ya que ese no suele fallar.

PD.: No pongo el código en ASP porque no se aún programar en ASP

Enjuto · #5 (**permalink**) 29/04/2008, 04:21

El JavaScript no me funciona, y el PHP no sé cómo usarlo.

En fin, tendré que renunciar a mi idea...

Muchas gracias de todos modos. Seguid así.

daPhyre · #6 (**permalink**) 29/04/2008, 11:41

Quizá se podría encontrar solución al JS, pero tambien hace el cambio de imagen 100% al azar, por lo que alguien que entra por primera vez podría ver el fondo distinto (Ahora, eso sería dificil para empezar, y quedaría sorprendido después cuando sepa que tuvo el "fondo al azar", así que no creo fuera mucho problema).

Ahora, si quisieras que fuera a fuerza por lo menos después de una visita, las soluciones son un sistema de login o usar cookies, y ya probar después de un el código al azar. Este último caso es ya muy complejo, por lo que si no usas PHP quizá no sea lo más conveniente. Igual sigo pensando que la primera solución es buena.

Otro detalle: ¿Sabes usar CSS? Si te interesa, puedo aplicar tu misma idea para cambiar no solo el fondo, si no el CSS completo, y así darle una vista más distinta a tu página (Ejemplo: El fondo normal azul con letra gris, y el azar1, un fondo rojo con verde con letras amarillas, además de todos los otros detalles).

Avisame si te interesa la propuesta.

bookmaster · #7 (**permalink**) 29/04/2008, 12:19

Bueno, me ha costado un poquillo pero al final lo he areglado en JavaScript:

Código HTML:

<script language="javascript">
var Imagen;
Imagen = Math.round(Math.random()*5 + 1); // Uso de Math.random(): Math.random()*Numero Maximo + Numero Minimo;
switch(Imagen){
	case 1:
		document.write('<body background="Images/Fondos/Fondo1.jpg">');
	break;
	case 2:
		document.write('<body background="Images/Fondos/Fondo2.jpg">');
	break;
	case 3:
		document.write('<body background="Images/Fondos/Fondo3.jpg">');
	break;
	case 4:
		document.write('<body background="Images/Fondos/Fondo4.jpg">');
	break;
	case 5:
		document.write('<body background="Images/Fondos/Fondo5.jpg">');
	break;
	default:
		document.write('<body background="Images/Fondos/Fondo.jpg">');
	break;
}
</script>

Ejemplo funcionando: http://fdw.lohacemosweb.net/CambiaFondo.php

Te dejo una versión "reducida" que es como la que puse en PHP pero en JavaScript. Con este puedes agregar tantos fondos como quieras cambiando solo las lineas "Images/Fondos/Fondo1.jpg", cuantas mas agreges mas fondos podras poner.:

Código HTML:

<script language="javascript">
var Imagenes;
Imagenes = new Array (
"Images/Fondos/Fondo.jpg",
"Images/Fondos/Fondo1.jpg",
"Images/Fondos/Fondo2.jpg",
"Images/Fondos/Fondo3.jpg",
"Images/Fondos/Fondo4.jpg",
"Images/Fondos/Fondo5.jpg");
var Imagen;
Imagen = Math.round(Math.random()*(Imagenes.length-1) + 0); // Uso de Math.random(): Math.random()*Numero Maximo + Numero Minimo;
document.write('<body background="'+Imagenes[Imagen]+'">');
</script>

Con este puedes agregar tantos fondos como quieras cambiando solo las lineas "Images/Fondos/Fondo1.jpg", cuantas mas agreges mas fondos podras poner.

Enjuto · #8 (**permalink**) 29/04/2008, 16:04

bookmaster, no sé qué hago mal, pero sigue sin funcionarme.

daPhyre, sólo quiero que cambie el fondo; no me gusta marear en exceso.

A ver si enfocándolo de otro modo...: Tengo (por ejemplo) tres fondos; uno de ellos (el habitual) quiero que aparezca el 80% de las veces, y los otros dos, el 10% y el 10% restantes respectivamente. ¿Es eso posible?

De verdad que agradezco vuestro interés.

bookmaster · #9 (**permalink**) 29/04/2008, 17:11

Siento si no se veía el ejemplo antes pero es que he estado haciendo cambios en mi hosting.

Hombre por poderse hacer si que se puede, pero va a ser bastante mas complicado, y si no te sale eso que es sencillo imagínate lo otro, de todas maneras veré como hacerlo.

daPhyre · #10 (**permalink**) 29/04/2008, 20:37

Bueno, gracias bookmaster por abreviarme la batalla contra el cambiador de fondos, aunque creo que sigue habiendo algo... Lo probaré yo a vr si me sirve.

A Enjuto: Solo era una propuesta, a trabajar sobre este entonces... y acerca de las posibilidades de cambio, solo debes hacer un random anidado. Uno primero que si es cero lo cambie y de forma contraria no lo cambie, y en caso de que lo cambie, otro random para ver cual pondrá en su lugar. Solo hay que ver la falla en el JS...

Suerte!

Enjuto · #11 (**permalink**) 30/04/2008, 07:02

Para un fondo completamente aleatorio encontré este script, que me funciona perfectamente:

Código HTML:

<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background: #000000 url("' + banner[random] + '") repeat; background-attachment:fixed;');
document.write(" }");
document.write("</style>");
</script>

Ahora faltaría hacerlo no tan aleatorio, sino repartiendo las probabilidades.

Si no puede ser, la única alternativa que se me ocurre es poner el fondo "habitual" repetido muchas veces para que sea más probable que salga éste. Pero el código ocuparía demasiado espacio...

daPhyre · #12 (**permalink**) 30/04/2008, 08:39

Mi solución para darle más posibilidades al primer fondo que a los demás:

Sustituye:

Código:

var random=Math.floor(10*Math.random());

Por:

Código:

if (Math.floor(5*Math.random())==0)	// 20% de posibilidad que sea otro
	var random=0;
else
	var random=Math.floor(9*Math.random()) + 1;

Primero asegurate que el anterior código te funcione perfectamente, y ya después, cambias la línea para que la posibilidad sea mayor con el primero.

Nota que te lo dejé con 20% de posibilidad que cambie, si deseas que sea otra, cambia el 5 por otro número. Mientras mayor sea el número, menos posibilidades que cambie (Ejemplo: 2 sería 50% y 10 sería 10%. 100 sería 1% etc...)

Otro detalle: Si aun no te sirve el código, asegurate que tengas permitidos los JavaScript. Suerte!

Enjuto · #13 (**permalink**) 30/04/2008, 10:18

daPhyre, perfecto, maestro. Sólo un par de detalles:

Al cambiar el 5, a mí me funciona a la inversa; es decir: a menor número, menor probabilidad de que cambie el fondo (y me atrevería a aventurar que funciona en un rango del 1 al 10).

¿El (9*Math.random()) + 1 varía en función de cuántos fondos incluya o es siempre igual?

Muchas gracias.

daPhyre · #14 (**permalink**) 02/05/2008, 22:25

Pues a tus preguntas:

1) Es lo que te decía: el 2 es 50% de que cambie (Uno de cada dos cambia), el cinco es el 20% de que cambie (Uno de cada 5 cambia) etc...

2) Y tienes razón, olvidé ese detalle. el "+1" es estático (Son los fondos predeterminados como normales, que en este caso, es uno) y el 9* indica cuantos son en total (En este caso, 9 + 1 = 10 fondos) Espero haberme explicado lo suficiente claro para que puedas hacerlo. Suerte! ;)

Enjuto · #15 (**permalink**) 04/05/2008, 10:48

Cita:

Iniciado por daPhyre

Pues a tus preguntas:

1) Es lo que te decía: el 2 es 50% de que cambie (Uno de cada dos cambia), el cinco es el 20% de que cambie (Uno de cada 5 cambia) etc...

2) Y tienes razón, olvidé ese detalle. el "+1" es estático (Son los fondos predeterminados como normales, que en este caso, es uno) y el 9* indica cuantos son en total (En este caso, 9 + 1 = 10 fondos) Espero haberme explicado lo suficiente claro para que puedas hacerlo. Suerte! ;)

Sí, justamente eso suponía. Ya lo apliqué y me funciona perfectamente.

Muchísimas gracias.