Cambiar fondo con javascript y recordarlo

[designjs]

Miren tengo un problema y he estado buscando y no he encontrado la solución. Les explico:

Estoy haciendo un proyecto web en donde el usuario cuando entre cambie el fondo de la página...bueno ya hice eso y tiene las opciones para cambiar el fondo...pero...cuando entra a una de las partes del menu, por ejemplo, de la portada entra a noticias, el fondo se cambia y queda igual al principio...

Por favor si me pueden ayudar a que el cambio del fondo que el usuario elija no se borre sino que siga aun cuando cambie de la página de inicio...No se que tecnología se puede utilizar, supongo que con javascript ya que el cambio del fondo si lo hice con esta...

PD: Una cosa más la página no tendrá registro asi que el recordar el fondo será hasta cuando cierre el navegador o salga de la página

Aquí les pongo el proyecto que estoy haciendo:
http://genteviva.zxq.net/

[jahepi]

Hola designjs !

Prodrías utilizar cookies para guardar esa información.
Aquí hay una guía de como trabajar con las cookies junto con Javascript:
http://www.quirksmode.org/js/cookies.html

Un saludo y suerte !

[designjs]

Me parece excelente tu ayuda...la verdad me costo un poco entender lo de esa página y además investigue y hay un codigo que me ayuda y es el styleswitcher.js pero el problemita es que el cambia css y ya tengo otro script directo en la página para elegir las imagenes de fondo miren hago el llamado con este script:

<script type="text/javascript">
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '120px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
</script>

y le agrego un fade in con este:

<script>
$(document).ready(function(){
$("#bgimages").fadeTo("slow", 0.3);
$("#bgimages").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});
</script>


ahora las imagenes estan en html de esta manera:
<div id="bgimages">
<img src="img/jovenes/footer/bg_principal.png" onClick="cambiar(this)" width=150 height=100 alt="Fondo Principal" border="0" title="">
<img src="img/jovenes/footer/bg_1.jpg" onClick="cambiar(this)" width=150 height=100 alt="Fondo 1" border="0">
<img src="img/jovenes/footer/bg_2.jpg" onClick="cambiar(this)" width=150 height=100 alt="Fondo 2" border="0">
<img src="img/jovenes/footer/bg_3.jpg" onClick="cambiar(this)" width=150 height=100 alt="Fondo 3" border="0">
<img src="img/jovenes/footer/bg_4.jpg" onClick="cambiar(this)" width=150 height=100 alt="Fondo 4" border="0">
<img src="img/jovenes/footer/bg_5.jpg" onClick="cambiar(this)" width=150 height=100 alt="Fondo 5" border="0">
<img src="img/jovenes/footer/bg_6.jpg" onClick="cambiar(this)" width=150 height=100 alt="Fondo 6" border="0">
</div><!--final bgimages-->

mi pregunta es como hago para utilizar las cookies con este codigo para que cuando el usuario elija un color de fondo se almacene y cuando cambie de pagina por el menu no se borre la elección y pueda verse el fondo que elijio...

miren esta página es como les digo...
http://anidea.com/

[Aijoona]

Usa el highlight para el codigo, es ilegible eso.

Te recomiendo usar algo ya cocinado para el tema cookies (ejemplo esta libreria).

Entonces vos inicializas todo y consultas si existe una cookie o no:

Código Javascript:

// Funcion que setea el estilo deseado
function setStyle(style) {
    // .. tu implementacion
    
    // Guardamos el estilo en la cookie
    Cookie.set('style', style);
}
 
// Inicializa el sistema
$(function() {
    setStyle(Cookie.get('style') || 'estilo_por_defecto');
});
 

A tener en cuenta que por lo general las utilidades de cookies almacenan strings y no objetos, por lo cual deberias serializar/deserializar en caso de que quieras hacerlo.

[designjs]

Iniciado por Aijoona

Usa el highlight para el codigo, es ilegible eso.

Te recomiendo usar algo ya cocinado para el tema cookies ([URL="http://code.google.com/p/cookie-js/wiki/MainDocumentation"]ejemplo esta libreria[/URL]).

Entonces vos inicializas todo y consultas si existe una cookie o no:

Código Javascript:

// Funcion que setea el estilo deseado
function setStyle(style) {
    // .. tu implementacion
    
    // Guardamos el estilo en la cookie
    Cookie.set('style', style);
}
 
// Inicializa el sistema
$(function() {
    setStyle(Cookie.get('style') || 'estilo_por_defecto');
});
 

A tener en cuenta que por lo general las utilidades de cookies almacenan strings y no objetos, por lo cual deberias serializar/deserializar en caso de que quieras hacerlo.

Eres genial con tu respuesta pero debo informarte algo....casi que empiezo en esto y la verdad quede medio perdido en donde poner esto y que debo cambiar....si me puedes ayudar o indicarme como hacerlo....Nota: No es que me hagas mi trabajo, si ves tengo el sitio bien desarrollado, pero tengo problemas con este tema y la verdad no conozco mucho y estoy aprendiendo.....

Si me indicas como ubicarlo que debo cambiar....puse el codigo que me diste pero no funciono entonces se que algo hago mal.......Te agradecere mucho tu ayuda