Monitors the load process and the display of pictures : Image Img « HTML




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>



  <HEAD>

    <TITLE>JsLib 1.3 - Exemple - images.js</TITLE>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

    <META NAME="Author" CONTENT="Etienne CHEVILLARD">

    <!-- images.js -->

    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">

/* images.js

 * Role : controle le chargement et l'affichage des images

 * Projet : JsLib

 * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)

 * Version : 1.3

 * Creation : 15/02/2005

 * Mise a jour : 23/02/2005

 */



// --- Variables globales ---



// gestion des images

var imgs_ids=new Array(100);

var imgs_obj=new Array(100);

var imgs_cpt=0;



// --- Fonctions ---



// charge en memoire l'image d'URL specifiee

function chargerImage(idImage, url) {

  if ((!idImage) || (idImage=="")) return false;

  if ((!url) || (url=="")) return false;

  for (var i=0; i<imgs_cpt; i++) {

    if (imgs_ids[i]==idImage) {

      imgs_obj[i]=new Image();

      imgs_obj[i].name=idImage;

      imgs_obj[i].src=url;

      return true;

    }

  }    

  imgs_ids[imgs_cpt]=idImage;

  imgs_obj[imgs_cpt]=new Image();

  imgs_obj[imgs_cpt].name=idImage;

  imgs_obj[imgs_cpt].src=url;

  imgs_cpt=imgs_cpt+1;

  return true;

} // fin chargerImage(idImage, url)



// retourne l'URL de l'image specifiee

function obtenirURLImage(idImage) {

  if ((!idImage) || (idImage=="")) return "";

  for (var i=0; i<imgs_cpt; i++) {

    if (imgs_ids[i]==idImage)

      return (imgs_obj[i].src);

  }

  return "";

} // fin obtenirURLImage(idImage)



// ouvre l'image specifiee dans une fenetre de type popup

function ouvrirImageDansPopup(idImage, commentaire) {

  var imgl=250;

  var imgh=150;

  if ((!idImage) || (idImage=="")) return false;

  if (!commentaire)

    commentaire=idImage;

  for (var i=0; i<imgs_cpt; i++) {

    if ((imgs_ids[i]==idImage) && ((imgs_obj[i].complete) || (parseInt(imgs_obj[i].width) > 0))) {

      imgl=parseInt(imgs_obj[i].width);

      imgh=parseInt(imgs_obj[i].height);

      while ((imgl > screen.width-20) || (imgh > screen.height-20)) {

        imgl=parseInt(imgl*0.8);

        imgh=parseInt(imgh*0.8);

      }

      var fprp="left="+Math.floor((screen.width-imgl)/2)+",top="+Math.floor((screen.height-(imgh+40))/2);

      fprp+=",width="+imgl+",height="+imgh+",status=0,directories=0,toolbar=0";

      fprp+=",location=0,menubar=0,scrollbars=0,resizable=0";

      var ftxt="<HTML><HEAD><TITLE>"+commentaire;

      ftxt+="</TITLE></HEAD><BODY>";

      ftxt+="<DIV STYLE='position:absolute;visibility:visible;left:0px;top:0px;'>";

      ftxt+="<IMG SRC='"+imgs_obj[i].src;

      ftxt+="' WIDTH='"+imgl;

      ftxt+="' HEIGHT='"+imgh;

      ftxt+="' ALT='"+commentaire;

      ftxt+="' /></DIV></BODY></HTML>";

      var fnew=window.open("about:blank", idImage, fprp);

      fnew.document.open();

      fnew.document.write(ftxt);

      fnew.document.close();

      if (window.focus)

        fnew.focus();

      return true;

    }

  }

  return false;

}  // fin ouvrirImageDansPopup(idImage)



// verifie que l'image specifiee est correctement chargee

function verifierChargementImage(idImage) {

  if ((!idImage) || (idImage=="")) return false;

  for (var i=0; i<imgs_cpt; i++) {

    if (imgs_ids[i]==idImage)

      return ((imgs_obj[i].complete) || (parseInt(imgs_obj[i].width) > 0));

  }

  return false;

} // fin verifierChargementImage(idImage)



    </SCRIPT>

  </HEAD>



  <BODY>

 

    <H1>JsLib 1.3</H1>

    <HR>

    <H2>Exemple - images.js</H2>



    <NOSCRIPT>

      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne

      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la

      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>

      <HR>

    </NOSCRIPT>



    <FORM ACTION="GET" NAME="f1" onSubmit="return false">

    

      <P>Charger l'image patagonie.jpg&nbsp;:

        <INPUT TYPE=BUTTON NAME="b1" VALUE="Charger"

          onClick="alert(chargerImage('image1', './extra/patagonie.jpg'));">

                    

      <P>V&eacute;rifier que l'image est charg&eacute;e&nbsp;:

        <INPUT TYPE=BUTTON NAME="b2" VALUE="V&eacute;rifier"

          onClick="alert(verifierChargementImage('image1'));">



      <P>Afficher l'URL de l'image&nbsp;:

        <INPUT TYPE=BUTTON NAME="b3" VALUE="Afficher l'URL"

          onClick="alert(obtenirURLImage('image1'));">



      <P>Ouvrir l'image dans une fen&ecirc;tre de type popup&nbsp;:

        <INPUT TYPE=BUTTON NAME="b4" VALUE="Popup"

          onClick="ouvrirImageDansPopup('image1', 'Paysage de Patagonie');">

      

      <P>Modifier l'URL de l'image ci-dessous&nbsp;:

        <INPUT TYPE=BUTTON NAME="b5" VALUE="Modifier l'URL"

          onClick="document.image2.src=obtenirURLImage('image1');">



      <P><IMG NAME="image2" SRC="./extra/home.gif" ALT="Image temporaire">

        

    </FORM>

    

  </BODY>

</HTML>
Monitors the load process and the display of pictures : Image Img « HTML « JavaScript DHTML
