cambiar de fondo cuado de un click

[alx_salazar]

Hola comunidad..
llevo varios días con este problema investigue y mire que se puede hacer con java script y la verdad no entiendomuybien como funciona...

la situacion es que quiero que la primera vez que cargue mi pagina principal me muestre un fondo que esta en el div que lo inserto con un css y al dar un click quiero que desaparezca el fondo halle un codigo pero no lo entiedno.

y al momento que la pagina vaya a la pagina principal vuelva a aparecer.
alguien me puede explciar bien este codigo
lo modifique el css ya que tenia la propiedad display:none; en oculto y en display: block; en visible. lo probe pero loq ue hace de esta forma es desaparecer todo el div lo unico que quiero es desaprecer la imagen y no la desaprecer alguien me puede explicar o enseñarme como hacer loq ue quiero se que estoy un poco serca pero no entiendo muy bien js es cun poco complejo y la verdad no estudiado mucho este tema y ahora me doy duenta q es muy importante..

que aqui lo pongo

Código Javascript:

<SCRIPT LANGUAGE=JavaScript> 
   function borra_imagen(){
            var di = document.getElementById('contenedor');
            var tg = document.getElementById('tglink');
                di.className = 'oculto';
                tg.onclick = function(){
            if (di.className == 'oculto')
            {
            di.className = 'visible';
            }else{
            di.className = 'oculto';
                }
        }
    }
</SCRIPT>
 

Código CSS:

.oculto{
         background-image:;
    }
    .visible{
        background-image: url(../images/content.jpg);
    }
 

[alx_salazar]

hola nuevamente..... he estado revisando el codigo y lo mejor es hacerle cargar la imagen con el form, ahora no entiendo como puedo hacerle desaparecer cuando de un click. por ejemplo ene l menu

Código Javascript:

<SCRIPT LANGUAGE=JavaScript>
   function borra_imagen(){
            var di = document.getElementById('contenedor_principal');
            var tg = document.getElementById('contenedor_1');
                di.className = 'oculto';
                
                tg.onclick = function(){
            if (di.className == 'oculto')
            {
            di.className = 'visible';
            }else{
            di.className = 'oculto';
                }
        }
    }
    window.onload= borra_imagen;
</SCRIPT>
 

Código CSS:

.oculto{
        background-image: url(../images/content.jpg);
    }
    .visible{
        background:;
        display: block;
    }
 

quien me puede dar una manito con esto ya casi lo tengo pero no se en que fallo ahora para poder desaparecer la imagen.

[lubtufano]

Parece que en el segundo ejemplo invertiste las clases CSS.

[alx_salazar]

hola si asi esta solo que al momento de cargar debe estar como visible, eso lo estaba revisando de lo cual debe quedar asi, pero el asunto ahora es que al momento de dar el clic si desaparece y vuelve a cargar como lo puedo hacer para que una vez que de el click no vuelva cargar...

Código Javascript:

<SCRIPT LANGUAGE=JavaScript>
   function carga_imagen(){
        var id_fondo = document.getElementById('contenedor');
        var evento = document.getElementById('menu_aoma');
        
            id_fondo.className = 'visible';
    
        evento.onclick = function(){        
        
        if (id_fondo.className == 'oculto'){
            id_fondo.className = 'visible';
                }
                    else{
                    id_fondo.className = 'oculto';
                }
        }   
    }
    window.onload = carga_imagen;
</SCRIPT>
 

Código CSS:

.oculto{
        background:;
        display: block; 
    }
    .visible{
        background-image:url(../images/content.jpg);
 
    }
 

amigo porfa ayudame que ya no se que hacer con esto..

[alx_salazar]

ahora decidi hacerlo de esta forma tu sabes alguna otra mejor forma de hacerlo ayudame que estoy muchos dias con este inconveniente y el problema es que no se manejar js