Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Imagen cargando.....

Estas en el tema de Imagen cargando..... en el foro de Frameworks JS en Foros del Web. Hola, tengo un código de una imagen cargando que quiero ponerla en una pagina que tiene un marco con distintos enlaces e iconos que al ...
  #1 (permalink)  
Antiguo 15/11/2012, 17:11
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Imagen cargando.....

Hola, tengo un código de una imagen cargando que quiero ponerla en una pagina que tiene un marco con distintos enlaces e iconos que al hacer click en ellos salen las paginas debajo en un iframe.Y lo que quiero es que cada vez que haga click, y mientras cargan los distintos enlaces salga la imagen cargando.
Como lo haría?

cod de imagen cargando:

Código Javascript:
Ver original
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. window.onload=cerrar;
  5. function cerrar(){
  6. $("#carga").animate({"opacity":"0"},1000,function(){$("#carga").css("display","none");});
  7. }
  8. $("#carga").click(function(){cerrar();});
  9. });
  10. </script>
  11.  
  12. <div title="Click para Cerrar" id="carga" style="cursor:pointer;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-shadow:inset yellow 0px 0px 14px;background-image:url(http://www.puntroma.com/img/ico_cargando.gif);background-position:center;background-size:100%;background-color:#111111;width:300px;color:#fff;text-align:center;height:100px;padding:52px 12px 12px 12px;position:fixed;top:30%;left:40%;z-index:6;">Loading...</div>


index.html

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>WedServer</title>
  5.  
  6. <link rel="stylesheet" type="text/css" media="screen" href="css_menu/estilo.css">
  7. <script type="text/javascript" src="js_menu/jquery.min.js"></script>
  8.     <script type="text/javascript" src="js_menu/fisheye-iutil.min.js"></script>
  9.     <script type="text/javascript" src="js_menu/dock-example1.js"></script>
  10.     <script type="text/javascript" src="js_menu/stack-1.js"></script>
  11.     <script type="text/javascript">
  12.         $(function(){
  13.             var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85};
  14.             $('#jqDock').jqDock(jqDockOpts);
  15.         });
  16.     </script>
  17.     <script language="JavaScript">
  18. <!--
  19. mensaje=" |======| www.CheNico.com "
  20. function hora() {
  21. var h = new Date();
  22. window.status="|======| "
  23. + h.getHours() +":"+ h.getMinutes() +"" +mensaje ;
  24. window.setTimeout('hora()',100);
  25. }
  26. hora()
  27. //-->
  28. </script>
  29.  
  30.     <script languaje="javascript">
  31. function opcion0(){
  32. var m=document.getElementById('marco');
  33. m.src="menu1.php";
  34. }
  35.  
  36. function opcion1(){
  37. var m=document.getElementById('marco');
  38. m.src="busqueda_wedserver.php";
  39. }
  40.  
  41. function opcion2(){
  42. var m=document.getElementById('marco');
  43. m.src="consulta_telefonos_nuevo_aviso.php";
  44.  
  45. }
  46. function opcion3(){
  47. var m=document.getElementById('marco');
  48. m.src="menu4.php";
  49.  
  50. }
  51. function opcion4(){
  52. var m=document.getElementById('marco');
  53. m.src="menu4.php";
  54.  
  55. }
  56. function opcion5(){
  57. var m=document.getElementById('marco');
  58. m.src="index.php";
  59.  
  60. }
  61. function opcion6(){
  62. var m=document.getElementById('marco');
  63. m.src="presupuesto.htm";
  64.  
  65.  
  66. }
  67. function opcion7(){
  68. var m=document.getElementById('marco');
  69. m.src="realizacion_albaran.htm";
  70.  
  71.  
  72.  
  73. }
  74. function opcion8(){
  75. var m=document.getElementById('marco');
  76. m.src="busqueda_facturas_telefono.htm";
  77.  
  78. }
  79. function opcion9(){
  80. var m=document.getElementById('marco');
  81. m.src="consulta_emision.htm";
  82.  
  83. }
  84. function opcion10(){
  85. var m=document.getElementById('marco');
  86. m.src="wedserver_bus_id_aviso.html";
  87.  
  88.  
  89. }
  90. function opcion11(){
  91. var m=document.getElementById('marco');
  92. m.src="index2.php";
  93. }
  94. function opcion12(){
  95. var m=document.getElementById('marco');
  96. m.src="busq_telefono.htm";
  97. }
  98. function opcion13(){
  99. var m=document.getElementById('marco');
  100. m.src="busqueda_situacion.htm";
  101. }
  102. function opcion14(){
  103. var m=document.getElementById('marco');
  104. m.src="estadisticas.htm";
  105. }
  106. function opcion15(){
  107. var m=document.getElementById('marco');
  108. m.src="listado_iva.htm";
  109. }
  110. function opcion16(){
  111. var m=document.getElementById('marco');
  112. m.src="listado_facturacion.htm";
  113. }
  114. function opcion17(){
  115. var m=document.getElementById('marco');
  116. m.src="facturacion_marca_wh.htm";
  117. }
  118. function opcion18(){
  119. var m=document.getElementById('marco');
  120. m.src="facturacion_marca_ind.htm";
  121. }
  122. function opcion19(){
  123. var m=document.getElementById('marco');
  124. m.src="facturacion_tecnico4.htm";
  125. }
  126. function opcion20(){
  127. var m=document.getElementById('marco');
  128. m.src="tabla_bus_avisos.php";
  129. }
  130. function opcion21(){
  131. var m=document.getElementById('marco');
  132. m.src="gastos.html";
  133. }
  134. </script>  
  135. </head>
  136. <div class="cabecera" id="cabecera">
  137. WedServer
  138. </div>
  139. <div id="dock">
  140.         <div class="dock-container">
  141.        
  142. <!-- Edita aquí el icono -->
  143. <a class="dock-item" href='javascript:opcion0();'><span>Inicio</span><img src="imagenes_menu/recepcionista.jpg" alt="Inicio" /></a>
  144. <!-- Finaliza icono -->
  145.            
  146. <!-- Edita aquí el icono -->
  147. <a class="dock-item"  href='javascript:opcion1();'><span>Buscar</span><img src="imagenes_menu/busqueda_base.jpg" alt="Buscar" /></a>
  148.            
  149.            
  150. <!-- Finaliza icono -->
  151. <!-- Edita aquí el icono -->
  152.             <a class="dock-item" href='javascript:opcion2();'><span>Almacen</span><img src="imagenes_menu/almacen2.jpg" alt="Almacen" /></a>
  153.            
  154. <!-- Finaliza icono -->
  155. <!-- Edita aquí el icono -->
  156.             <a class="dock-item" href='javascript:opcion3();'><span>Alta de Clientes</span><img src="imagenes_menu/almacen3.jpg" alt="Clientes" /></a>
  157.            
  158. <!-- Finaliza icono -->
  159. <!-- Edita aquí el icono -->
  160.         <a class="dock-item" href='javascript:opcion4();'><span>Nuevo aviso</span><img src="imagenes_menu/nuevo_aviso3.png" alt="Nuevo aviso" /></a>    
  161.  
  162. <!-- Finaliza icono -->
  163.  
  164. <!-- Edita aquí el icono -->
  165.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;4</span><img src="imagenes_menu/music.png" alt="music" /></a>
  166.            
  167. <!-- Finaliza icono -->
  168.  
  169. <!-- Edita aquí el icono -->        
  170.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;5</span><img src="imagenes_menu/video.png" alt="video" /></a>
  171.  
  172. <!-- Finaliza icono -->
  173.  
  174. <!-- Edita aquí el icono -->
  175.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;6</span><img src="imagenes_menu/history.png" alt="history" /></a>
  176.            
  177. <!-- Finaliza icono -->
  178.  
  179. <!-- Edita aquí el icono -->
  180.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;7</span><img src="imagenes_menu/calendar.png" alt="calendar" /></a>
  181.  
  182. <!-- Finaliza icono -->
  183.  
  184. <!-- Edita aquí el icono -->
  185.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;8</span><img src="imagenes_menu/link.png" alt="links" /></a>
  186.  
  187. <!-- Finaliza icono -->
  188.  
  189. <!-- Edita aquí el icono -->
  190.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;9</span><img src="imagenes_menu/rss.png" alt="rss" /></a>
  191.  
  192. <!-- Finaliza icono -->
  193. <!-- Edita aquí el icono -->
  194.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;9</span><img src="imagenes_menu/rss.png" alt="rss" /></a>
  195.  
  196. <!-- Finaliza icono -->
  197. <!-- Edita aquí el icono -->
  198.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;8</span><img src="imagenes_menu/link.png" alt="links" /></a>
  199.  
  200. <!-- Finaliza icono -->
  201.  
  202. <!-- Edita aquí el icono -->
  203.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;9</span><img src="imagenes_menu/rss.png" alt="rss" /></a>
  204.  
  205. <!-- Finaliza icono -->
  206. <!-- Edita aquí el icono -->
  207.             <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;9</span><img src="imagenes_menu/rss.png" alt="rss" /></a>
  208.  
  209. <!-- Finaliza icono -->
  210.             </div>
  211. </div>
  212. <div class="contenido" id="contenido"> <iframe id="marco" class="marco">
  213. </iframe></div>
  214. </body>
  215. </html>

Gracias y un saludo.



EDITO: Bueno, haciendo esto he conseguido que me salga nada mas abrir la pagina, pero como puedo hacer que salga la imagen tambien al pulsar en los enlaces del marco?

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.     window.onload=cerrar;
  4.     function cerrar(){
  5.     $("#carga").animate({"opacity":"0"},1000,function(){$("#carga").css("display","none");});
  6.             }
  7.     $("#carga").click(function(){cerrar();});
  8.           });
  9.         $(function(){
  10.             var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85};
  11.             $('#jqDock').jqDock(jqDockOpts);
  12.           });
  13.     </script>

Última edición por satjaen; 16/11/2012 a las 02:58
  #2 (permalink)  
Antiguo 17/11/2012, 12:00
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 8 años, 1 mes
Puntos: 10
Respuesta: Imagen cargando.....

Por favor, ayuda.

Etiquetas: ajax, html, javascript, js, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:53.