Foros del Web » Creando para Internet » HTML »

Fondo cambiante

Estas en el tema de Fondo cambiante en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/04/2008, 02:48
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Fondo cambiante

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.

Última edición por Enjuto; 28/04/2008 a las 06:29
  #2 (permalink)  
Antiguo 28/04/2008, 14:26
 
Fecha de Ingreso: abril-2008
Mensajes: 28
Antigüedad: 9 años, 7 meses
Puntos: 0
Re: Fondo cambiante

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.
  #3 (permalink)  
Antiguo 28/04/2008, 18:08
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Re: Fondo cambiante

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...
  #4 (permalink)  
Antiguo 28/04/2008, 20:29
Avatar de bookmaster  
Fecha de Ingreso: febrero-2002
Ubicación: Toledo
Mensajes: 976
Antigüedad: 15 años, 9 meses
Puntos: 67
Re: Fondo cambiante

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
__________________
Decir si te a funcionado la respuesta es ¡GRATIS!. Por favor indicarlo.
http://www.lohacemosweb.net
http://tutoriales.lohacemosweb.net

Última edición por bookmaster; 28/04/2008 a las 20:53
  #5 (permalink)  
Antiguo 29/04/2008, 05:21
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Re: Fondo cambiante

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í.
  #6 (permalink)  
Antiguo 29/04/2008, 12:41
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Fondo cambiante

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.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 29/04/2008, 13:19
Avatar de bookmaster  
Fecha de Ingreso: febrero-2002
Ubicación: Toledo
Mensajes: 976
Antigüedad: 15 años, 9 meses
Puntos: 67
Re: Fondo cambiante

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.
__________________
Decir si te a funcionado la respuesta es ¡GRATIS!. Por favor indicarlo.
http://www.lohacemosweb.net
http://tutoriales.lohacemosweb.net

Última edición por bookmaster; 29/04/2008 a las 13:32
  #8 (permalink)  
Antiguo 29/04/2008, 17:04
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Re: Fondo cambiante

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.
  #9 (permalink)  
Antiguo 29/04/2008, 18:11
Avatar de bookmaster  
Fecha de Ingreso: febrero-2002
Ubicación: Toledo
Mensajes: 976
Antigüedad: 15 años, 9 meses
Puntos: 67
Re: Fondo cambiante

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.
__________________
Decir si te a funcionado la respuesta es ¡GRATIS!. Por favor indicarlo.
http://www.lohacemosweb.net
http://tutoriales.lohacemosweb.net
  #10 (permalink)  
Antiguo 29/04/2008, 21:37
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Fondo cambiante

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!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #11 (permalink)  
Antiguo 30/04/2008, 08:02
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Re: Fondo cambiante

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...
  #12 (permalink)  
Antiguo 30/04/2008, 09:39
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Fondo cambiante

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!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #13 (permalink)  
Antiguo 30/04/2008, 11:18
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Re: Fondo cambiante

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.
  #14 (permalink)  
Antiguo 02/05/2008, 23:25
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Fondo cambiante

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! ;)
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #15 (permalink)  
Antiguo 04/05/2008, 11:48
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Re: Fondo cambiante

Cita:
Iniciado por daPhyre Ver Mensaje
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 10:37.