III) exemples de scripts JavaScript
vendredi 2 mars 2012 (), par
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 :
- racine = http://worldofwarcraft.judgehype.com/screenshots/images/fonds/metalgear
- nombre d’images = 20 (ou plus)
- nombre de chiffres= 2
- extension = jpg
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<=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<=i){
puissancen=puissancen*10;
taillen=taillen+1;
// alert("nombre de zéros défini");
}
for (z=1;z<=(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
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 fonctionRedimensionnement 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 <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<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'imageLe script pour plusieurs images pour un cadre par page, adapté à ce site.
- 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
- 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.
RSS 2.0