Monitors the load process and the display of pictures : Image Img : HTML JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » HTML » Image Img »

 

Monitors the load process and the display of pictures



<!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].width0))) {
      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].width0));
  }
  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>



           
       

Download : Download nav_extra.zip nav_extra.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo HTML
» Image Img