Tema: Realizar todo en una página
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 11/12/2013, 06:51
jagp1119
 
Fecha de Ingreso: noviembre-2013
Mensajes: 84
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Realizar todo en una página
Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3.    
  4.     <head>
  5.         <meta http-equiv="refresh" >    
  6.         <link rel="stylesheet" href="estilo.css" type="text/css"/>
  7.     
  8.  
  9.         <script type="text/javascript" language="javascript">
  10.         
  11.               
  12.                 
  13.        
  14.         <!-- ******************** SCRIPT DE JAVA PARA GUARDAR Y VISUALIZAR LAS VARIABLES DE LAS IMAGENES*********************-->
  15.         
  16.         <script type="text/javascript">
  17.             var variable;
  18.             var dato;
  19.             var clicenimagen;
  20.             
  21.             
  22.              
  23.             var imagenes = new Array();
  24.             imagenes[0] = "img/rambo.jpg";
  25.             imagenes[1] = "img/Hobbit2.jpg";
  26.             imagenes[2] = "hunger_games.jpg";
  27.             imagenes[3] = "thor2.jpg";
  28.             imagenes[4] = "evento.jpg";
  29.             imagenes[5] = "choke.jpg";
  30.             imagenes[6] = "estacionbar.jpg"; 
  31.             imagenes[7] = "wekeleleBar.jpg";
  32.             imagenes[8] = "sinfonica.jpg";
  33.             imagenes[9] = "documental.jpg";
  34.             imagenes[10] = "conservatorio.jpg";
  35.             imagenes[11] = "banda.jpg";
  36.             imagenes[12] = "capacitaciones.png";
  37.             imagenes[13] = "audiovisual.jpg";
  38.             imagenes[14] = "tolimaemprende.jpg";
  39.             imagenes[15] = "congreso.jpg";
  40.             
  41.        
  42. //FUNCION PARA CAMBIAR LA IMAGEN PRINCIPAL CADA VEZ QUE SE DE EN UN EVENTO  **********************   
  43.             function cuadro(numero){  
  44.                 
  45.             
  46.                 
  47.                 if (numero == 1){document.images["matrix"].src =imagenes[0];
  48.                                  document.images["matrix2"].src =imagenes[1];
  49.                                  document.images["matrix3"].src =imagenes[2];
  50.                                  document.images["matrix4"].src =imagenes[3];}
  51.                 
  52.                 if (numero == 2){document.images["matrix"].src =imagenes[4];
  53.                                  document.images["matrix2"].src =imagenes[5];
  54.                                  document.images["matrix3"].src =imagenes[6];
  55.                                  document.images["matrix4"].src =imagenes[7];}
  56.                 
  57.                 if (numero == 3){document.images["matrix"].src =imagenes[8];
  58.                                  document.images["matrix2"].src =imagenes[9];
  59.                                  document.images["matrix3"].src =imagenes[10];
  60.                                  document.images["matrix4"].src =imagenes[11];}
  61.                 
  62.                 if (numero == 4){document.images["matrix"].src =imagenes[12];
  63.                                  document.images["matrix2"].src =imagenes[13];
  64.                                  document.images["matrix3"].src =imagenes[14];
  65.                                  document.images["matrix4"].src =imagenes[15];}
  66.             }
  67.  
  68.            
  69.             
  70.             function guardar(){ // FUNCION PARA GUARDAR LA VBLE VARIABLE PARA CARGARLA EN LA PAGINA SIGUIENTE
  71.                 
  72.                 var objeto = variable;
  73.                 
  74.                 objeto = JSON.stringify(objeto);
  75.             
  76.                 localStorage.setItem('miObjeto',objeto);
  77.                 
  78.                 
  79.                 
  80.                 var objetos = clicenimagen;
  81.                 
  82.                 objetos = JSON.stringify(objetos);
  83.             
  84.                 localStorage.setItem('miObjetos',objetos);
  85.                
  86.                 
  87.             }
  88.             
  89.             function pantallainicio(){
  90.                 document.images["matrix"].src =imagenes[0];
  91.                 document.images["matrix2"].src =imagenes[4];
  92.                 document.images["matrix3"].src =imagenes[8];
  93.                 document.images["matrix4"].src =imagenes[12];
  94.                    
  95.             }
  96.             
  97.             function recarga(){
  98.                 window.location.reload();   
  99.             }
  100.                     
  101.         </script>
  102.          
  103.     </head>
  104.  
  105. <body onload="pantallainicio()">
  106.     
  107.     <div id="pri_pag_home">
  108.         
  109.         <div id="cajaheader"></div>
  110.         <div id=principal>
  111.             <header>
  112.                 <h1> Max</h1>
  113.                 <div id="buscador"></div>
  114.          
  115.             </header>
  116.         </div> 
  117.         
  118.         
  119.         <section>
  120.                 
  121.            
  122.             <div id="eventos">
  123.                 
  124.                 <a href="#seg_pag_evento" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix" onclick="clicenimagen=1, guardar(), recarga()"></a>
  125.             
  126.             </div>    
  127.             
  128.             <div id="eventos2">
  129.             
  130.                 <a href="#seg_pag_evento" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix2" onclick="clicenimagen=2, guardar(), recarga()"></a>
  131.             
  132.             </div>
  133.                 
  134.                 
  135.             <div id="eventos3">
  136.             
  137.                 <a href="#seg_pag_evento" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix3" onclick="clicenimagen=3, guardar(), recarga()"></a>
  138.             
  139.             </div>
  140.                 
  141.             <div id="eventos4">
  142.                 
  143.                 <a href="#seg_pag_evento" ><img src="img/evento.jpg" style="position:relative; width: 100%; height: 100%;" id="matrix4" onclick="clicenimagen=4, guardar(), recarga()"></a>
  144.             
  145.             </div>
  146.             
  147.             <div id="bordeizquierdo"></div>
  148.                 
  149.                               
  150.              
  151.         </section>
  152.  
  153.         <article>
  154.         
  155.             <div id="cine">
  156.                 
  157.                 <a href="#" onclick="cuadro(1), variable='1'"><img src="img/rambo.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
  158.                 
  159.                 <div id="barra">
  160.                 
  161.                     <h2> CINE </h2>
  162.                     
  163.                     
  164.                  </div>    
  165.                         
  166.             </div> 
  167.             
  168.             <div id="pub">
  169.                 
  170.                 <a href="#" onclick="cuadro(2), variable = 2"><img src="img/evento.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
  171.                 
  172.                 <div id="barra"> 
  173.                 
  174.                     <h2> PUB </h2>
  175.                     
  176.                 </div>
  177.                         
  178.             </div> 
  179.             
  180.             <div id="cultural" >
  181.                 
  182.                 <a href="#" onclick="cuadro(3), variable = 3"><img src="img/sinfonica.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
  183.                    
  184.                 <div id="barra"> 
  185.                                 
  186.                     <h2> CULTURAL </h2>
  187.                 
  188.                 </div>
  189.                         
  190.             </div> 
  191.             
  192.             <div id="capacitaciones">
  193.                 
  194.                 <a href="#" onclick="cuadro(4), variable = 4"><img style="position:absolute; width:100%; height: 100%;" /></a>
  195.                 
  196.                 <div id="barra">
  197.                 
  198.                     <h2> TALLERES </h2>
  199.                     
  200.                 </div>    
  201.                         
  202.             </div> 
  203.         
  204.         </article>
  205.           
  206.         <div id="footer">
  207.             
  208.             <div id="inferior1">
  209.             
  210.                 <div id="perfil1" > 
  211.                 
  212.                     <a href="perfil.html"><img src="Iconos/man_48.png" style="position: absolute; top:10%; left:25%;"></a>
  213.                     
  214.                 </div>
  215.                 
  216.                 <div id="home1">
  217.                 
  218.                     <a href="pri_pag_home"><img src="Iconos/home_48.png" style="position: absolute; top:10%; left:25%;"></a>
  219.                 
  220.                 </div> 
  221.                 
  222.                     
  223.                 
  224.                 <div id="info1">
  225.                 
  226.                     <a href="#seg_pag_evento"><img src="Iconos/info_48.png" style="position: absolute; top:10%; left:25%;"></a>
  227.                 
  228.                 </div>
  229.                 
  230.                     
  231.             
  232.             </div>
  233.         
  234.         
  235.         </div>
  236.     </div>


Hola herzbazi, se que es complicado entender los códigod de otras personas, pero basicamente lo que hago en es que tengo 2 varibales que son "variable" y "clicneimagen", con estas busco que cuando de clic en cierta imagen el programa pueda saber para poder mostrar esa imagen sola en una nueva página, el problema es que no me las reconocia entonces las guarde en localstore y ahi me reconocia el valor de las variables, pero no me actualizaba la página entonces las variables quedan con un único valor siempre, le puse una funcion de recarga con "windows.location.reload()" pero realmente no funciona como quiero.

Gracias Herzbazi.