Tout catalogue ou album photo qui se respecte possede des images de previsualisation. Deux methodes sont utilisees pour ce genre de process, soit vous faites une petite image par image a afficher ou alors, vous construisez ces petites images a l'affichage en temps reel.
Ce chapitre traitera la deuxieme possibilite.
Posons plus sérieusement le problème :
Pour homogeneise la page, nous allons donc nous baser sur une taille fixe maximale pour l'affichage de l'image et recalculer ses dimensions a la volee en JavaScript.
Exemple :
Ces images ont ete redimensionnees a la volee afin de creer des previsualisateur de petites tailles avec une taille maximale de 50 * 50.
Function JavaScript redimImage :
function redimImage(inImg, inMW, inMH) { // Cette function recoit 3 parametres // inImg : Chemin relatif de l'image // inMW : Largeur maximale // inMH : Hauteur maximale var maxWidth = inMW; var maxHeight = inMH; // Declarations des variables "Nouvelle Taille" var dW = 0; var dH = 0; // Declaration d'un objet Image var oImg = new Image(); // Affectation du chemin de l'image a l'objet oImg.src = inImg; // On recupere les tailles reelles var h = dH = oImg.height; var w = dW = oImg.width; // Si la largeur ou la hauteur depasse la taille maximale if ((h >= maxHeight) || (w >= maxWidth)) { // Si la largeur et la hauteur depasse la taille maximale if ((h >= maxHeight) && (w >= maxWidth)) { // On cherche la plus grande valeur if (h > w) { dH = maxHeight; // On recalcule la taille proportionnellement dW = parseInt((w * dH) / h, 10); } else { dW = maxWidth; // On recalcule la taille proportionnellement dH = parseInt((h * dW) / w, 10); } } else if ((h > maxHeight) && (w < maxWidth)) { // Si la hauteur depasse la taille maximale dH = maxHeight; // On recalcule la taille proportionnellement dW = parseInt((w * dH) / h, 10); } else if ((h < maxHeight) && (w > maxWidth)) { // Si la largeur depasse la taille maximale dW = maxWidth; // On recalcule la taille proportionnellement dH = parseInt((h * dW) / w, 10); } } // On ecrit l'image dans le document document.writeln("<img src=\"" + inImg + "\" width=\"" + dW + "\" height=\"" + dH + "\" border=\"0\">"); };
Boutique |
Sites |
Bar |
Forum |
PhpBB |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Lettre
