Imagen cargando.....

satjaen · #1 (**permalink**) 15/11/2012, 18:11

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<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script>
$(document).ready(function(){ 
window.onload=cerrar; 
function cerrar(){ 
$("#carga").animate({"opacity":"0"},1000,function(){$("#carga").css("display","none");}); 
} 
$("#carga").click(function(){cerrar();}); 
});
</script>
 
<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<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WedServer</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="css_menu/estilo.css">
<script type="text/javascript" src="js_menu/jquery.min.js"></script>
    <script type="text/javascript" src="js_menu/fisheye-iutil.min.js"></script>
    <script type="text/javascript" src="js_menu/dock-example1.js"></script>
    <script type="text/javascript" src="js_menu/stack-1.js"></script>
    <script type="text/javascript">
        $(function(){
            var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85};
            $('#jqDock').jqDock(jqDockOpts);
        });
    </script>
    <script language="JavaScript"> 
<!-- 
mensaje=" |======| www.CheNico.com " 
function hora() { 
var h = new Date(); 
window.status="|======| " 
+ h.getHours() +":"+ h.getMinutes() +"" +mensaje ; 
window.setTimeout('hora()',100); 
} 
hora() 
//--> 
</script> 
 
    <script languaje="javascript">
function opcion0(){
var m=document.getElementById('marco');
m.src="menu1.php";
}
 
function opcion1(){
var m=document.getElementById('marco');
m.src="busqueda_wedserver.php";
}
 
function opcion2(){
var m=document.getElementById('marco');
m.src="consulta_telefonos_nuevo_aviso.php";
 
}
function opcion3(){
var m=document.getElementById('marco');
m.src="menu4.php";
 
}
function opcion4(){
var m=document.getElementById('marco');
m.src="menu4.php";
 
}
function opcion5(){
var m=document.getElementById('marco');
m.src="index.php";
 
}
function opcion6(){
var m=document.getElementById('marco');
m.src="presupuesto.htm";
 
 
}
function opcion7(){
var m=document.getElementById('marco');
m.src="realizacion_albaran.htm";
 
 
 
}
function opcion8(){
var m=document.getElementById('marco');
m.src="busqueda_facturas_telefono.htm";
 
}
function opcion9(){
var m=document.getElementById('marco');
m.src="consulta_emision.htm";
 
}
function opcion10(){
var m=document.getElementById('marco');
m.src="wedserver_bus_id_aviso.html";
 
 
}
function opcion11(){
var m=document.getElementById('marco');
m.src="index2.php";
}
function opcion12(){
var m=document.getElementById('marco');
m.src="busq_telefono.htm";
}
function opcion13(){
var m=document.getElementById('marco');
m.src="busqueda_situacion.htm";
}
function opcion14(){
var m=document.getElementById('marco');
m.src="estadisticas.htm";
}
function opcion15(){
var m=document.getElementById('marco');
m.src="listado_iva.htm";
}
function opcion16(){
var m=document.getElementById('marco');
m.src="listado_facturacion.htm";
}
function opcion17(){
var m=document.getElementById('marco');
m.src="facturacion_marca_wh.htm";
}
function opcion18(){
var m=document.getElementById('marco');
m.src="facturacion_marca_ind.htm";
}
function opcion19(){
var m=document.getElementById('marco');
m.src="facturacion_tecnico4.htm";
}
function opcion20(){
var m=document.getElementById('marco');
m.src="tabla_bus_avisos.php";
}
function opcion21(){
var m=document.getElementById('marco');
m.src="gastos.html";
}
</script>   
</head>
<body>
<div class="cabecera" id="cabecera">
WedServer
</div>
<div id="dock">
        <div class="dock-container">
        
<!-- Edita aquí el icono -->
<a class="dock-item" href='javascript:opcion0();'><span>Inicio</span><img src="imagenes_menu/recepcionista.jpg" alt="Inicio" /></a> 
<!-- Finaliza icono -->
            
<!-- Edita aquí el icono -->
<a class="dock-item"  href='javascript:opcion1();'><span>Buscar</span><img src="imagenes_menu/busqueda_base.jpg" alt="Buscar" /></a>
            
            
<!-- Finaliza icono -->
<!-- Edita aquí el icono -->
            <a class="dock-item" href='javascript:opcion2();'><span>Almacen</span><img src="imagenes_menu/almacen2.jpg" alt="Almacen" /></a> 
            
<!-- Finaliza icono -->
<!-- Edita aquí el icono -->
            <a class="dock-item" href='javascript:opcion3();'><span>Alta de Clientes</span><img src="imagenes_menu/almacen3.jpg" alt="Clientes" /></a> 
            
<!-- Finaliza icono -->
<!-- Edita aquí el icono -->
        <a class="dock-item" href='javascript:opcion4();'><span>Nuevo aviso</span><img src="imagenes_menu/nuevo_aviso3.png" alt="Nuevo aviso" /></a>    
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;4</span><img src="imagenes_menu/music.png" alt="music" /></a> 
            
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->        
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;5</span><img src="imagenes_menu/video.png" alt="video" /></a> 
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;6</span><img src="imagenes_menu/history.png" alt="history" /></a> 
            
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;7</span><img src="imagenes_menu/calendar.png" alt="calendar" /></a>
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;8</span><img src="imagenes_menu/link.png" alt="links" /></a>
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;9</span><img src="imagenes_menu/rss.png" alt="rss" /></a>
 
<!-- Finaliza icono -->
<!-- Edita aquí el icono -->
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;9</span><img src="imagenes_menu/rss.png" alt="rss" /></a>
 
<!-- Finaliza icono -->
<!-- Edita aquí el icono -->
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;8</span><img src="imagenes_menu/link.png" alt="links" /></a>
 
<!-- Finaliza icono -->
 
<!-- Edita aquí el icono -->
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;9</span><img src="imagenes_menu/rss.png" alt="rss" /></a>
 
<!-- Finaliza icono -->
<!-- Edita aquí el icono -->
            <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo&nbsp;9</span><img src="imagenes_menu/rss.png" alt="rss" /></a>
 
<!-- Finaliza icono -->
            </div>
</div>
<div class="contenido" id="contenido"> <iframe id="marco" class="marco">
</iframe></div>
<blockquote>&nbsp;</blockquote>
</body>
</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<script type="text/javascript">
    $(document).ready(function(){ 
    window.onload=cerrar; 
    function cerrar(){ 
    $("#carga").animate({"opacity":"0"},1000,function(){$("#carga").css("display","none");}); 
            } 
    $("#carga").click(function(){cerrar();}); 
          });
        $(function(){
            var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85};
            $('#jqDock').jqDock(jqDockOpts);
          });
    </script>

satjaen · #2 (**permalink**) 17/11/2012, 13:00

Por favor, ayuda.