How can I insert "image loading" message

Rodre · December 30, 2008

Hi, I´ve made a page that shows pictures. The user clicks on an arrow and the pictures change. But I need to insert a "Loading Image" message or icon while the picture loads.

I´m new to programing so I don´t know how to do this.

Anyone can help me ?

Thanks.

Here is the code.

<? include("contadir.php"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Nicole Arcuschin Photography</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <script type="text/javascript">
  var cateover = '';
  var cateout = '';
  var fotonum = 100;
  var cantper = <?echo $cantper;?>;
  var cantcom = <?echo $cantcom;?>;
  var limite = 0;
  var path = '';
  var select = '';
  var salida = 'commercial';
  function over(cateover){
    document.getElementById(cateover).src='botones/'+cateover+'-hover.gif';
  }
  function out(cateout){
    if(cateout != select){    
      document.getElementById(cateout).src='botones/'+cateout+'.gif';
    }
  }
  function outselect(salida){
    document.getElementById(salida).src='botones/'+salida+'.gif';
  }
  function activo(act){
    document.getElementById(act).src='botones/'+act+'-hover.gif';
  }
  function contactf(){
    outselect(salida);
    select = 'contact';
    activo(select);
    document.getElementById('foto').src='img/fotocontacto.jpg';
    document.getElementById('flechaleft').style.display='none';
    document.getElementById('flecharight').style.display='none';
    salida = select;
  }
  function personalf(){
    outselect(salida);
    select = 'personal';
    activo(select);
    fotonum = 100;
    document.getElementById('flechaleft').style.display='none';
    document.getElementById('flecharight').style.display='inline';
    document.getElementById('foto').src='fotos/personal/100.jpg';
    path = 'fotos/personal/';
    limite = cantper + 99;
    salida = select;
  }
  function commercialf(){
    outselect(salida);
    select = 'commercial';
    activo(select);
    fotonum = 100;
    document.getElementById('flechaleft').style.display='none';
    document.getElementById('flecharight').style.display='inline';
    document.getElementById('foto').src='fotos/commercial/100.jpg';
    path = 'fotos/commercial/';
    limite = cantcom + 99;
    salida = select;
  }
  function atrasfoto(){
    fotonum = fotonum - 1;
    if(fotonum == 99){
      fotonum = 100;
    }
    if(fotonum == 100){
      document.getElementById('flechaleft').style.display='none';
    }
    if(fotonum >= 100){
      document.getElementById('foto').src = path + fotonum + '.jpg';	
    }    
    if(fotonum == limite - 1){
      document.getElementById('flecharight').style.display='inline';
    }
  }
  function adelantefoto(){
  fotonum = fotonum + 1;
    if(fotonum == 101){
      document.getElementById('flechaleft').style.display='inline';
    }
    if(fotonum == limite){
      document.getElementById('flecharight').style.display='none';
    }	
    if(fotonum <= limite){
      document.getElementById('foto').src = path + fotonum + '.jpg';
    }
  } 
  </script>
  </head>
  <body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
    <div class="divcontenedor">
      <div class="divlinks">
        <table class="tablalinks">
          <tr>
            <td><img id="personal" src="botones/personal.gif" onmouseover="over('personal');" onmouseout="out('personal');" onclick="personalf();"></td>
            <td class="separadorlinks"> </td>
            <td><img id="commercial" src="botones/commercial.gif" onmouseover="over('commercial');" onmouseout="out('commercial');" onclick="commercialf();"></td>
            <td class="separadorlinks"> </td>
            <td><img id="contact" src="botones/contact.gif" onmouseover="over('contact');" onmouseout="out('contact');" onclick="contactf();"></td>
          </tr>
        </table>
      </div>
      <div class="divgaleria">
        <table class="tablagaleria">
          <tr>
            <td class="tdflechas"><img id="flechaleft" class="flechaleftclase" src="botones/prev-pic.gif" onclick="atrasfoto();"></td>
            <td class="tdfoto"><img id="foto" class="fotoclase" src="img/fotomain.jpg"></td>
            <td class="tdflechas"><img id="flecharight" class="flecharightclase" src="botones/next-pic.gif" onclick="adelantefoto();"></td>
          </tr>
          <tr>
            <td class="tdloader" colspan="3"><img id="loader" src="img/loader.gif"></td>
          </tr>
        </table>
      </div>
      <div class="divjaz">
        <img id="jaz" src="botones/jaz.gif" onclick="window.open('http://www.jazminberakha.com');" onmouseover="over('jaz');" onmouseout="out('jaz');">
      </div>
    </div>
  </body>
</html>

opalelement · December 30, 2008

Sites of interest:

http://www.webreference.com/programming/javascript/gr/column3/

http://www.reconn.us/content/view/37/47/

Sign In

How can I insert "image loading" message

Recommended Posts

Rodre

Link to comment

Share on other sites

opalelement

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information