how to add a loading gif image to my web page
<p>how can i add a loading gif image when every time i try to load a page,i have an admin page with links on it ,i  want when i click on a link before the page loads it should show the gif image,i added some javascript code on the header tag and in the body tag i added this code</p>

<pre><code>&lt;div id="loading"&gt;&lt;/div&gt;
</code></pre>

<p>the admin page looks like this</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;script type="text/javascript"&gt;
        function preloader(){
            document.getElementById("loading").style.display = "none";
            document.getElementById("content").style.display = "block";
        }//preloader
        window.onload = preloader;
&lt;/script&gt;
        &lt;title&gt;profile- Admin panel&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
&lt;div id="loading"&gt;&lt;/div&gt;    
&lt;?php include 'includes/connect.php'; ?&gt;
&lt;?php include 'title_bar.php'; ?&gt;
&lt;link rel="stylesheet" href="css/loading.css"&gt;

&lt;h3&gt;admin panel system&lt;/h3&gt;
&lt;p&gt; you are logged in as &lt;b&gt;&lt;?php echo $username?&gt;&lt;/b&gt; [&lt;?php echo $level_name;?&gt;]&lt;/p&gt;
&lt;?php
if($user_level != 1){
 header('location : profile.php');

}

?&gt;

&lt;p&gt;
 &lt;ul class="dash"&gt;                          
            &lt;li&gt;
            &lt;a href="#" title="Report" class="tip" data-placement="bottom" &gt;
            &lt;img src="images/icons/report.png" alt="" /&gt;
            &lt;span&gt;Report&lt;/span&gt;
            &lt;/a&gt;
            &lt;/li&gt;

             &lt;li&gt;
            &lt;a href="view.php" title="Customers" class="tip" data-placement="bottom" &gt;
            &lt;img src="images/icons/customers.png" alt="" /&gt;

            &lt;span&gt;Customers&lt;/span&gt;
            &lt;/a&gt;
            &lt;/li&gt;
            &lt;/ul&gt;

&lt;/p&gt;
&lt;p&gt;
&lt;?php
if(isset($_GET['type']) &amp;&amp; !empty($_GET['type'])){
?&gt;
&lt;table&gt;
&lt;tr&gt;&lt;td width='150px'&gt; Users&lt;/td&gt;&lt;td&gt;Options&lt;/td&gt;&lt;/tr&gt;
&lt;?php
 $list_query = mysql_query("SELECT id, username, type FROM users");
 while($run_list = mysql_fetch_array($list_query)){
  $u_id = $run_list['id'];
  $u_username = $run_list['username'];
  $u_type = $run_list['type'];
 ?&gt;
 &lt;tr&gt;&lt;td&gt;&lt;?php echo $u_username?&gt;&lt;/td&gt;&lt;td&gt;
 &lt;?php
 if($u_type == 'a'){
     echo "&lt;a href='option.php?u_id=$u_id&amp;type=$u_type'&gt;Deactivate&lt;/a&gt;";

} else{

    echo "&lt;a href='option.php?u_id=$u_id&amp;type=$u_type'&gt;activate&lt;/a&gt;";
}


 ?&gt;

 &lt;/td&gt;&lt;/tr&gt;
 &lt;?php
 }
?&gt;
&lt;/table&gt; 
&lt;?php

} else{

   echo "Select Options Above";
}

?&gt;

&lt;/body&gt;
&lt;/html&gt; 
</code></pre>

<p>this is what i have in the loading.css</p>

<pre><code>div#content {
    display: none;
    }

div#loading {             
    top: 200 px;
    margin: auto;
    position: absolute;
    z-index: 1000;
    width: 160px;
    height: 24px;
    background: url('../images/loading (1).gif') no-repeat;
    cursor: wait;                
    }
</code></pre>
