div cambie la imagen al dar un click

alx_salazar · #1 (**permalink**) 25/11/2011, 15:38

hola Buenas tardes,

este es el unico ligar dodne pueden despejarme y enseñarme ah hacer lo siguiente...
llevo varias hora y no logro resultados

Tengo un problema quiero controlar la imagen de fondo de una div que lo agrag mediante un css. no tengo idea de como realizar esta acción.

Voy a explicar detalladamente lo que deseo hacer, estoy realizando una pagina web y el asunto es que tengo un div con un fondo que lo inserto desde la hoja de stilos, y lo que quiero hacer esque cuando cargue la pagina principal muestre esta imagen del div y cuando de un click en cualquier otro elemnto de la pagina desaparezca, y luego is doy un clic a la pagina de inicio la muetre nuevamente.

he leido varias hora pero no entiendo como realizarlo hago pruebas con unos codigos pero funcina nada.. se queda permanentemente.
Es posible hacer lo que quiero hacer...? he leido que hay como hacer con un script pero no lo gro hacer me pueden ayudar porfavor, agradeceria su interes por esta ayuda.. quiero aprender a como de lugar por eso estoy aca averiguando quien pueda explicarme o ayudarme con un ejemploo....

venommist · #2 (**permalink**) 25/11/2011, 16:04

Estimado, si deseas hacer algo como eso, te recomiendo (por seguridad para que funcione), Javascript.

Por Ejemplo:

Código Javascript:

Ver original<script>
function vaciar_img(){
 
var doc = document.getElementById('[COLOR="YellowGreen"]midiv[/COLOR]');
 
doc.style.background=" ";
};
</script>

Y en el Div ponerle:

Código HTML:

Ver original<div id="[COLOR="YellowGreen"]midiv[/COLOR]" onclick="vaciar_img();"> contenido de la img </div>

O si quieres que sean otros div los que le borren la imagen, o la cambien:

Código HTML:

Ver original<div> Div con la Imagen </div>
<div onclick="vaciar_img();"> contenido de la img </div>
<div onclick="vaciar_img();"> contenido de la img </div>

Si Deseas reemplazar la imagen por cada una que poseas dentro de un div es:

Código Javascript:

Ver original<script>
function cambiar_img(id){
     var img = document.getElementById(id).style.background;
     var principal = document.getElementById('midiv');
 
     principal.style.background=img;
};
</script>

y el HTML quedaría de este modo:

Código HTML:

Ver original<div id="midiv">&nbsp;</div>
<div onclick="cambiar_img(this.id);"> contenido de la img </div>
<div onclick="cambiar_img(this.id);"> contenido de la img </div>

De esta última, hay que comprobarla, no estoy seguro.

Saludos!

P.D: sube el código si tienes dudas, y te lo solucionaremos.

alx_salazar · #3 (**permalink**) 25/11/2011, 16:11

gracais por tu pronta respuesta lo voy a probar enseguida gracias por ayudarme.. en un min te cuento como me fue gracais.. gracias si no lo pued implementar ya subo el codigo mil gracias..

alx_salazar · #4 (**permalink**) 25/11/2011, 16:25

Hola aqui estoy porfavor ayudame no lo entiendo
este es un index.php

Código HTML:

Ver original<?php  
 // no direct access 
 defined( '_JEXEC' ) or die( 'Restricted access' );?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
 
<head>
<jdoc:include type="head" /> 
 <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" /> 
 
 <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" /> 
 
<link href="css/template.css" rel="stylesheet" type="text/css" />
 
    <script>
            function vaciar_img(){
            var doc = document.getElementById('[COLOR="YellowGreen"]midiv[/COLOR]');
            doc.style.background=" ";
            };
    </script>
</head>
 
<body>
 
    <div id="body">
        
        <div id="headerSidebar">
            <jdoc:include type="modules" name="headerSidebar"  style="xhtml" />
        </div>
     
        <div id="head_contenedor">
            <div id="header" onclick="location.href='http://localhost/pagina_psd/index.php'">                      
                <jdoc:include type="modules" name="head_contenedor" style="xhtml" />
 
            </div>   
                  
            <div id="headerSearch" >
                 <jdoc:include type="modules" name="headerSearch" style="xhtml" />
            </div>
        </div>
   
        <div id ="menu"> <jdoc:include type="modules" name="menu" /> </div>             
            <div id = "contenedor">                         
                    <jdoc:include type="modules" name="contenedor"  style="xhtml" />
                <div id="[COLOR="YellowGreen"]contendor_contedino_sidebar[/COLOR]" onclick="vaciar_img();">                 
                <jdoc:include type="modules" name="contendor_contedino_sidebar"  style="xhtml" /> 
                    <div id = "contenedor">
                        <jdoc:include type="component" /> 
                    </div>
                    <div id="sidebar">                  
                         <jdoc:include type="modules" name="sidebar"  style="xhtml" /> 
                    </div> 
                </div>
     <div id ="contentop">
                      <jdoc:include type="modules" name="contentop"  style="xhtml" />
                 </div>
                     
                <div id="contenttop_sidebar">               
                    <jdoc:include type="modules" name="contenttop_sidebar"  style="xhtml" /> 
                </div>
 
            </div>
 
            <div id="footer"> © 2011 Aoma & <a href="http://www.google.com" target="_blank">pagina</a>
                 <jdoc:include type="modules" name="footer"  style="xhtml" />
            </div>
    
    </div>
 
 
</body>
</html>

template.css

Código CSS:

Ver original/*ESTILOS DE */
#body{
    width:1259px;       
    margin: 20px auto;
    background-color: #FFF;
    box-shadow: #202020 0.3em 0.3em 0.3em;
    position:static;
    
    
}
#head_contenedor{
    width:998px;
    height:266px;
    }
 
#header{
    width:832px;
    height:266px;
    float:left;
    cursor:pointer;
    background-image:url(../images/header.jpg);
    background-repeat: no-repeat;
    
}
 
#headerSearch { 
    width:164px;
    float:right;
    height:265px;
    position: static;
    text-align:center;  
}
 
#headerSidebar{
    height: 300px;
    width: 261px;   
    float:right;
    }
 
#menu{
    max-width:998PX;
    min-width:998px;
    height:34px;
    background-image: url(../images/barra_menu.jpg);    
    text-align:center;
    margin-top: auto;
    }
 
 
#contenedor{
    width:1259px;
    min-height:563px;
    overflow:auto;
    float:right;
    overflow-x: hidden;
    background-image: url(../images/content.jpg);
    background-repeat:no-repeat;
 
    }
 
#contenedor {
    width:966px;
    min-height:400px;
    float:left;
    font-family: Helvetica,Arial,sans-serif;
    color:#666;
    overflow-y: hidden;
    overflow-x: hidden;
    padding-top:1.5em;
    margin-left: 1em;
    margin-right:1em;
}
 
 
#contendor_contedino_sidebar{
        min-height:430px;
        width:1259px;
        float:right;
    }
 
#contentop {
    width:998px;
    height:124px;
    float:left;
    background-image: url(../images/contenttop.jpg);
    background-repeat: no-repeat;   
}
 
#sidebar {
    width:261px;
    min-height:444px;
    float:right;
    position: inherit;
    background-color: #005b7f;
    margin-left:auto;
    margin-right:auto;
    overflow: inherit;
    overflow-y: hidden;
}
 
#contenttop_sidebar{
    width:261px;
    min-height:124px;
        background-color: #005b7f;
 
    float: right;
}
#footer_contenedor{
    width:1259px;
    height:18px;
    }
 
#footer {
    width:1259px;
    height:18px;
    color:#FFF;
    left:auto;
    background-position:685px;
    font-family: Helvetica,Arial,sans-serif;
    font-size:11px;
    padding-top:6px;
    background-color: #6d6f71;
    text-align:center;
    clear:both;
}

alx_salazar · #5 (**permalink**) 25/11/2011, 16:29

Por el apuro de tener tu ayuda no he pùesto bien los nombre del div, el nombre es contenedor ya lo cambie pero no funciona no pasa nada... Ayudame revisando con esto estoy que no se que hacer....gracias

alx_salazar · #6 (**permalink**) 25/11/2011, 17:12

Hola he probado los dos codigos y no funciona no me doy cuenta que esta mal.. lo prueba de varias form.. si puedes espero tu pronta respuesta..