Cambiar Background Dinamicamente

[DeCodigos]

Buenas! yo estoy utilizando este codigo para cambiar de .css dinamicamente, lo que hace es que cada vez que apreto un boton, se cambie el css, ahora lo que quiero hacer es que nada mas se modifique el fondo, osea que use unas imagenes que tienen numero del 1 a 50 y se repita este fondo, el codigo que tengo es el siguiente,


<script type="text/javascript">
function rand(min, max){
var argc = arguments.length;
if(argc == 1){
min = 1;
max = 2147483647;
}else if(argc == 1){
return "Warning: rand() expects exactly 2 parameters, 1 given";
}
return Math.floor((Math.random() * (max - min + 1)) + min);
}

function change(){
aleatorio = rand(1, 29);
document.getElementById("back_change").rel = '../../css/backgrounds/' + aleatorio + '.css';
}
</script>


ahora lo que yo quiero es que en vez de usar el css, directamente se escriba en la web un estilo como el siguiente:

<style>
body{
background: url(../../images/backgrounds/'aleatorio'.gif) repeat;
}
</style>

Alguien me puede ayudar? MIL GRACIAS!

[sysmadryn]

Hola.

Puedes hacerlo directamente en el script. Por ejemplo, si las imagenes tienen nombre de archivo de la forma : numero.gif

function change(){
aleatorio = rand(1, 29);
var image = aleatorio+"gif";
document.getElementById("back_change").style.backg roundImage="url("+aleatorio+"gif)";

}

[DeCodigos]

@sysmadryn, no me funciona, yo tengo las imagenes en /../../images/backgrounds, le cambie la direccion y tampoco funciona :S

[sysmadryn]

Hola.

Al codigo que puse le falta un punto antes de "gif" :

document.getElementById("back_change").style.backg roundImage="url("+aleatorio+".gif)";

Por lo demas deberia funcionar.
Si puedes copia el mensaje de error que te sale.

Saludos

[DeCodigos]

No cambia el fondo, no muestra ningun error

document.getElementById("back_change").style.backg roundImage="url(../../images/backgrounds/"+aleatorio+".gif)";

Este es el codigo que estoy usando :S

[DeCodigos]

Osea, yo lo que quiero hacer es cambiar el color del Body, de la web entera :S

[_cronos2]

Vamos a ver, voy a copiar tu código y lo analizamos:

Código Javascript:

<script type="text/javascript">
function rand(min, max){
var argc = arguments.length;
if(argc == 1){
min = 1;
max = 2147483647;
}else if(argc == 1){
return "Warning: rand() expects exactly 2 parameters, 1 given";
}
return Math.floor((Math.random() * (max - min + 1)) + min);
}
 
function change(){
aleatorio = rand(1, 29);
document.getElementById("back_change").rel = '../../css/backgrounds/' + aleatorio + '.css';
}
</script>
 

#2: A las funciones en las que el número de argumentos es variable no se les pasa ninguno (function rand()).
#6: ¿ max = 2147483647; ? Entonces no hace falta pasarle argumento, tendrías que llamarla como rand(), pero entonces habría 0 argumentos y no entraría en el if
#7: Si hay 1 argumento [...], si no y hay ¿1? . No tiene sentido.
#14: Si por defecto cuando sólo le pasas un argumento min es 1, ¿para qué le pasas 2?
#15: El rel de un elemento (aquí igual meto la pata xD) se usa para declarar qué relación tiene lo que va a traer ese elemento con el mismo. Ej: <link rel='stylesheet' ... />, porque lo que va a traer el link es una hoja de estilos. Por tanto no tiene sentido usar el rel para modificar la url, usa href porque me imagino que será un link.
Saludos (:

[DeCodigos]

gracias por las correcciones _cronos, pero como cambiaria el codigo para que en vez de traer esas horas de estilo, pueda modificar el background del body directamente, asi no tengo que tener 50 hojas de estilo y que se carguen cada vez que toco el boton, osea yo lo que quiero modificar es que directamente pueda escribir en la web por asi decirlo:

"<style>
body{
background: url(../../images/backgrounds/'aleatorio'.gif) repeat;
}
</style>"

Asi me ahorro que tenga que traer cada vez que pulso el boton un archivo css, busca las imagenes randon en la carpeta y las aplica de fondo del body...Cualquier consulta no dudes :D

[_cronos2]

Bueno, esta vez yo creo que es bastante más fácil que la anterior vez xD. Prueba así:

Código Javascript:

function rand(){
 var argc = arguments.length, min, max;
 switch(argc){
  case 0:
   min=1;
   max=2;
  break;
  case 1:
   min = 1;
   max=arguments[0];
  break;
  default:
   min=arguments[0];
   max=arguments[1];
  break;
 }
 return Math.round(Math.random() * (max - min) + min);
}
function change(){
 document.body.style.backgroundImage='url(/../../images/backgrounds/'+rand(50)+'.gif)';
}
 

Código HTML:

<button onclick='change();'>Cambiar imagen</button>
 

Saludos (:

[DeCodigos]

Gracias _Cronos2, yo utilizo el siguiente codigo para que se guarden en los cookies el backrogrun elejido por el usuario, como puedo modificarlo para que guarde en vez del .css, la imagen elejida?

<script>
if($.cookie("css")) {
$("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
$("#back_change").click(function() {
$("link").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
</script>

Gracias!

[_cronos2]

Más o menos, por intuición del código jQuery, lo que haces es cambiar el rel del link según la cookie y cambiar la cookie con el rel del div, pero ahora lo difícil está en coger la imagen de fondo del body. Prueba con esto, pero no sé si funcionará:

Código Javascript:

function change(){
 return 'background:url(/../../images/backgrounds/'+rand(50)+'.gif)';
}
if($.cookie("img")) {
$("body").attr("style",$("body").attr("style")+$.cookie("img"));
}
$(document).ready(function() {
$("#back_change").click(function() {
var img=$("body").attr("style")+change();
$("body").attr("style", img);
$.cookie("img",img, {expires: 365, path: '/'});
return false;
});
});
 

Saludos (: