Accueil > Développement web > Les scripts JavaScript > III) exemples de scripts JavaScript
389 visites

III) exemples de scripts JavaScript

vendredi 2 mars 2012

Version imprimable de cet article Version imprimable

Générateur de liens

génération de liens pour une galerie d’images

Pour pouvoir récupérer plus facilement les images d’une galerie, ce script simple génère tous les liens dans la même page, à partir de la racine du chemin de l’image et du nombre d’images à générer.
On peut aussi préciser le nombre de zéros avant le numéro de l’image.

Ce script est très simple, puisqu’il se contente d’associer racine+numéro+extension pour générer n liens de type http://le_site/image01.jpg, http://le_site/image02.jpg...

par exemple ici

il est possible (par un clic droit sous FF, par ex) de copier l’adresse de l’image.

en l’occurrence ici http://worldofwarcraft.judgehype.com/screenshots/images/fonds/metalgear04.jpg

donc en prenant ces paramètres :

cela génère les liens de la galerie.

Cependant, ce script étant très simple, il ne fonctionne que sur les galeries suivant cette règle de nommage, et seulement si l’image est atteignable directement.
Ainsi, les sites utilisant le flash player pour afficher une galerie ne pourront être récupérés.

function generer(){
           //alert("generation");
           // récupération des valeurs des champs du formulaire
           var racine=this.document.form_gen.racine.value;
           var nombre=this.document.form_gen.nombre.value;
           var taille=this.document.form_gen.taille.value;
           var extension=this.document.form_gen.extension.value;
           for (i=1;i<=nblignes;i++) {
                       // pos[i]=i;
                       // this.document.write ou innerhtml= ?
                       // écriture directe dans le document
                       // on détermine la puissance de 10 du nombre, donc le nombre de zéros devant
                       var puissance=1;                                       
                       for (j=1;j<taille;j++){
                                   puissance=puissance*10;
                                   //alert("puissance définie");
                       }
                       // on ouvre une nouvelle page et on y écrit les liens
                       fenetre=window.open("","_blank");
                       fenetre.document.write("<html><head><title>Générateur de liens</title></head><body>");
                       // pour chaque image de 1 à n
                       for (i=1;i&lt;=nombre;i++) {
                                   var numero=""; // le nombre de zéros devant le chiffre
                                   // trouver puissance de 10 corrrespondant à i
                                   var puissancen=1;
                                   var taillen=0;
                                   while (puissancen&lt;=i){
                                               puissancen=puissancen*10;
                                               taillen=taillen+1;
                                               //        alert("nombre de zéros défini");
                                   }
                                   for (z=1;z&lt;=(taille-taillen);z++){
                                               numero=numero+"0";
                                   }
                                   numero=numero+i;
                                   var texte="<img src=\""+racine+numero+"."+extension+"\"></br>";
                                   // ecriture du lien
                                   //alert("ecriture");
                                   fenetre.document.write(texte);
                       }
                       //alert("terminé");
                       fenetre.document.write("</body></html>");
                       // controle d'erreur : on arrête le chargement de la page 15 secondes après génération du dernier lien
                       // car pour une raison inconnue, même après que tout soit chargé, la page continue de charger dans le vide.
                       fenetre.setTimeout("stop()",15000);
                       //return 0;
           }; // fin for
} // fin fonction


Le script est inclut dans le fichier html :

Générateur de liens -  HTML - 2.4 ko
Générateur de liens

Recadrage de blocs

redimensionnement/repositionnement des cadres articles/sous rubriques d’une rubrique, en fonction de leur présence ou non.

Dans la page d’une rubrique, il peut y avoir des articles, des sous-rubriques, ou les deux.

Ce script traite donc les 2 cas possibles, le 3ème cas "par défaut" étant géré par le CSS.

function traitercadres(){
           // ============= si bloc articles mais pas sous rubriques :
           // on enlève la marge du bas, prévue pour le bloc sous-rubriques
           if ((this.document.getElementById('rubrique_articles')!=null)&&(this.document.getElementById('rubrique_rubriques')==null)){
                       document.getElementById('rubrique_articles').style.bottom=0+"px";
           }; // fin si articles mais pas sous rubriques

           // ============= si pas bloc articles mais sous rubriques :
           // on enlève la marge du haut, prévue pour le bloc articles
           if ((this.document.getElementById('rubrique_rubriques')!=null)&&(this.document.getElementById('rubrique_articles')==null)){
                       // ici, on pose le haut du bloc a 127px du bloc le contenant.
                       // C'est la hauteur prise par le "chapeau" contenant le titre et la hiérarchie.
                       document.getElementById('rubrique_rubriques').style.top=127+"px";
                       document.getElementById('rubrique_rubriques').style.height="auto";
           }; // fin si sous rubriques mais pas articles
} // fin fonction

Redimensionnement d’images

redimensionnement proportionnel d’images

Un script pour redimensionner des images dans une page, en gardant les proportions de l’image.

Cela est utile pour les blocs de tailles variables.

On traite toutes les images d’un même cadre, que l’on charge au début dans un tableau.

function traiterimages(){

     // initialisation de la variable a null. la variable existe mais ne contient rien
     var tabimage=null;

     // le cadre susceptible de contenir des images à redimensionner se nomme "contenu_article".
     // On ne traite qu'un seule cadre par page.
     // car on suppose qu'il n'y a qu'un seul cadre "contenu"
     // D'autres boucles conditionnelles if/else permettraient de traiter d'autres cadres.
     // Par exemple en les mettant à la suite dans un tableau.

     if (this.document.getElementById('contenu_article')!=null){
                 // si le cadre existe, récupérer ses hauteur et largeur actuelles, réelles
                 var h_div=this.document.getElementById('contenu_article').offsetHeight;
                 var l_div=this.document.getElementById('contenu_article').offsetWidth;
                 // alert("le div image fait "+h_div+"x"+l_div+" (HxL)");
                 // récupération des images du div. Tous les éléments de type &lt;img=...
                 tabimage=document.getElementById('contenu_article').getElementsByTagName('img');
                 // alert("L'image fait "+h_img+"x"+l_img+" alors que le div fait "+h_div+"x"+l_div+" (HxL)");
     } // fin if/else traiter cadre et récupérer images

     // si le tableau n'est pas null et non vide
     if ((tabimage!=null)&&(tabimage.length>0)){
                 //alert("taille tableau="+tabimage.length);
                 // traitement des images une par une
                 for (i=0;i&lt;tabimage.length;i++) {
                                   image=tabimage[i];
                                   //var h_img=image.getAttribute('height');
                                   // on récupère la hauteur d'origine de l'image
                                   var h_img=image.naturalHeight;
                                   //var l_img=image.getAttribute('width');
                                   // de même pour la largeur d'origine
                                   var l_img=image.naturalWidth;
                                   //alert("traitement d'une image de "+h_img+" par "+l_img);
                                   // si l'image est plus large que le cadre
                                   if (l_img>l_div){
                                                     // le "facteur de réduction"
                                                     var reduction=l_img/l_div;
                                                     // le script original prévoyait le cas d'images "trop hautes".
                                                     // ici, le tableau d'image suppose qu'il y ait plusieurs images
                                                     // par exemple dans le cas d'un article)
                                                     // image plus LARGE que haute
                                                     // appliquer réduction en largeur et hauteur
                                                     var nh=h_img/reduction;
                                                     var nl=l_img/reduction;
                                                     // pour être au milieu, il faut que margeh=()h_div-nh/2
                                                     // var margeh=(h_div-nh)/2;
                                                     // image.setAttribute("style","margin-top:"+margeh+"px;");
                                                     // appliquer la réduction
                                                     //alert("la nouvelle image fera "+nh+"x"+nl+" dans un div de "+h_div+"x545 (HxL)");
                                                     image.setAttribute("height",nh);
                                                     image.setAttribute("width",nl);
                                                     // finsi
                                   } // if/else image trop grande (trop large)
                 } // fin for chaque image
     } // finsi tableau non nul
} // fin fonction traitement d'image

Le script pour plusieurs images pour un cadre par page, adapté à ce site.

Script redimensionnement images -  Zip - 1.1 ko
Script redimensionnement images
Script pour plusieurs images.

Le script pour une seule image pour un seul cadre par page, adapté à l’ancien site des Ateliers du Père Lachaise Associés.
Une image (l’œuvre) dans un cadre de taille variable, à côté d’un cadre texte de taille maximale fixe (détail de l’œuvre).

Script redimensionnement image -  Zip - 1.2 ko
Script redimensionnement image
Script pour une image unique par page

Le contenu de ce fichier peut être incorporé dans un fichier contenant plusieurs fonctions/scripts JavaScript

Il est possible de dé-commenter une partie du code afin d’activer le cas d’image trop haute.

En cas de traitement d’image unique dans un bloc, traitée en hauteur et largeur, remplacer le tabimage par une variable initialisée à l’élément zéro du tableau : image=document.getElementById('contenu_article').getElementsByTagName('img')[0];
ce sera, de fait, la première image contenue dans le bloc.

Si besoin est de précision, me contacter.

Répondre à cet article

Total 183923 visites depuis 2675 jours | Site réalisé par Vader[FR] | SPIP | | Plan du site | Suivre la vie du site RSS 2.0 | contact mail