Tema: div cambie la imagen al dar un click
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 25/11/2011, 16:25
alx_salazar
 
Fecha de Ingreso: septiembre-2008
Mensajes: 192
Antigüedad: 15 años, 7 meses
Puntos: 1
Respuesta: div cambie la imagen al dar un click
Hola aqui estoy porfavor ayudame no lo entiendo
este es un index.php

Código HTML: 
Ver original
  1. <?php  
  2.  // no direct access 
  3.  defined( '_JEXEC' ) or die( 'Restricted access' );?>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
  8.  
  9. <head>
  10. <jdoc:include type="head" /> 
  11.  <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" /> 
  12.  
  13.  <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" /> 
  14.  
  15. <link href="css/template.css" rel="stylesheet" type="text/css" />
  16.  
  17.     <script>
  18.             function vaciar_img(){
  19.             var doc = document.getElementById('[COLOR="YellowGreen"]midiv[/COLOR]');
  20.             doc.style.background=" ";
  21.             };
  22.     </script>
  23. </head>
  24.  
  25. <body>
  26.  
  27.     <div id="body">
  28.         
  29.         <div id="headerSidebar">
  30.             <jdoc:include type="modules" name="headerSidebar"  style="xhtml" />
  31.         </div>
  32.      
  33.         <div id="head_contenedor">
  34.             <div id="header" onclick="location.href='http://localhost/pagina_psd/index.php'">                      
  35.                 <jdoc:include type="modules" name="head_contenedor" style="xhtml" />
  36.  
  37.             </div>   
  38.                   
  39.             <div id="headerSearch" >
  40.                  <jdoc:include type="modules" name="headerSearch" style="xhtml" />
  41.             </div>
  42.         </div>
  43.    
  44.         <div id ="menu"> <jdoc:include type="modules" name="menu" /> </div>             
  45.             <div id = "contenedor">                         
  46.                     <jdoc:include type="modules" name="contenedor"  style="xhtml" />
  47.                 <div id="[COLOR="YellowGreen"]contendor_contedino_sidebar[/COLOR]" onclick="vaciar_img();">                 
  48.                 <jdoc:include type="modules" name="contendor_contedino_sidebar"  style="xhtml" /> 
  49.                     <div id = "contenedor">
  50.                         <jdoc:include type="component" /> 
  51.                     </div>
  52.                     <div id="sidebar">                  
  53.                          <jdoc:include type="modules" name="sidebar"  style="xhtml" /> 
  54.                     </div> 
  55.                 </div>
  56.      <div id ="contentop">
  57.                       <jdoc:include type="modules" name="contentop"  style="xhtml" />
  58.                  </div>
  59.                      
  60.                 <div id="contenttop_sidebar">               
  61.                     <jdoc:include type="modules" name="contenttop_sidebar"  style="xhtml" /> 
  62.                 </div>
  63.  
  64.             </div>
  65.  
  66.             <div id="footer"> © 2011 Aoma & <a href="http://www.google.com" target="_blank">pagina</a>
  67.                  <jdoc:include type="modules" name="footer"  style="xhtml" />
  68.             </div>
  69.     
  70.     </div>
  71.  
  72.  
  73. </body>
  74. </html>

template.css
Código CSS: 
Ver original
  1. /*ESTILOS DE */
  2. #body{
  3.     width:1259px;       
  4.     margin: 20px auto;
  5.     background-color: #FFF;
  6.     box-shadow: #202020 0.3em 0.3em 0.3em;
  7.     position:static;
  8.     
  9.     
  10. }
  11. #head_contenedor{
  12.     width:998px;
  13.     height:266px;
  14.     }
  15.  
  16. #header{
  17.     width:832px;
  18.     height:266px;
  19.     float:left;
  20.     cursor:pointer;
  21.     background-image:url(../images/header.jpg);
  22.     background-repeat: no-repeat;
  23.     
  24. }
  25.  
  26. #headerSearch { 
  27.     width:164px;
  28.     float:right;
  29.     height:265px;
  30.     position: static;
  31.     text-align:center;  
  32. }
  33.  
  34. #headerSidebar{
  35.     height: 300px;
  36.     width: 261px;   
  37.     float:right;
  38.     }
  39.  
  40. #menu{
  41.     max-width:998PX;
  42.     min-width:998px;
  43.     height:34px;
  44.     background-image: url(../images/barra_menu.jpg);    
  45.     text-align:center;
  46.     margin-top: auto;
  47.     }
  48.  
  49.  
  50. #contenedor{
  51.     width:1259px;
  52.     min-height:563px;
  53.     overflow:auto;
  54.     float:right;
  55.     overflow-x: hidden;
  56.     background-image: url(../images/content.jpg);
  57.     background-repeat:no-repeat;
  58.  
  59.     }
  60.  
  61. #contenedor {
  62.     width:966px;
  63.     min-height:400px;
  64.     float:left;
  65.     font-family: Helvetica,Arial,sans-serif;
  66.     color:#666;
  67.     overflow-y: hidden;
  68.     overflow-x: hidden;
  69.     padding-top:1.5em;
  70.     margin-left: 1em;
  71.     margin-right:1em;
  72. }
  73.  
  74.  
  75. #contendor_contedino_sidebar{
  76.         min-height:430px;
  77.         width:1259px;
  78.         float:right;
  79.     }
  80.  
  81. #contentop {
  82.     width:998px;
  83.     height:124px;
  84.     float:left;
  85.     background-image: url(../images/contenttop.jpg);
  86.     background-repeat: no-repeat;   
  87. }
  88.  
  89. #sidebar {
  90.     width:261px;
  91.     min-height:444px;
  92.     float:right;
  93.     position: inherit;
  94.     background-color: #005b7f;
  95.     margin-left:auto;
  96.     margin-right:auto;
  97.     overflow: inherit;
  98.     overflow-y: hidden;
  99. }
  100.  
  101. #contenttop_sidebar{
  102.     width:261px;
  103.     min-height:124px;
  104.         background-color: #005b7f;
  105.  
  106.     float: right;
  107. }
  108. #footer_contenedor{
  109.     width:1259px;
  110.     height:18px;
  111.     }
  112.  
  113. #footer {
  114.     width:1259px;
  115.     height:18px;
  116.     color:#FFF;
  117.     left:auto;
  118.     background-position:685px;
  119.     font-family: Helvetica,Arial,sans-serif;
  120.     font-size:11px;
  121.     padding-top:6px;
  122.     background-color: #6d6f71;
  123.     text-align:center;
  124.     clear:both;
  125. }