Jump to content

How can I insert "image loading" message

Rodre

By Rodre
in Javascript Help

 Share

Recommended Posts

Rodre Newbie

Rodre

Posted
Posted

 

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>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.