Redimensionnerune image.

Bonjour à tous,

Sur mon site internet, je souhaite que les photos soient automatiquement redimensionnées afin qu'elles s'affichent convenablement dans un navigateur. Aupararavant, j'utilisais ce script :

function picture_resize()
{
    var image=document.getElementById('picture');
    var parent=image.parentNode;
    var maxWidth=parent.offsetWidth - 20;
    var maxHeight=parent.offsetHeight;
    var ratio=image.width/image.height;
    if(image.width>maxWidth)
    {
        var newWidth=maxWidth;
        var newHeight=maxWidth/ratio;
        image.width=newWidth;
        image.height=newHeight;
    }
}

Il fonctionnait à merveille. Mais maintenant, je souhaite afficher plusieurs photos par pages (c'est ici), il y a donc plusieurs ID ; le script ne fonctionne donc plus. Serait-il possible d'utiliser les Classe ? Ou y aurait-il une autre alternative pour faire ce que je souhaite ?

Merci d'avance.

Il faudrait effectivement travailler avec des classes. Par contre, il n'existe pas de méthode document.getElementsByClass() ou équivalent. La plupart des librairies Javascript proposent cependant cette fonctionnalité, et on trouve aussi des fonctions dédiées (si on ne veut pas utiliser une librairie complète).

Une fois récupérés tous les éléments dotés de la classe choisie, il faut boucler sur ces éléments et appliquer ta fonction (adaptée) à chaque élément.

Ça peut donner quelque chose dans ce style:

// D'abord il me faut une fonction getElementsByClass
// Ici, j'utilise celle de Dustin Diaz (http://www.dustindiaz.com/getelementsbyclass/)

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\\\s)"+searchClass+"(\\\\s|$)");
	for (j = 0, k = 0; j < elsLen; j++) {
		if ( pattern.test(els[j].className) ) {
			classElements[k] = els[j];
			k++;
		}
	}
	return classElements;
}

// Ensuite, la fonction que l'on appellera pour chaque image:

function pictureResize(image) {
	var full_width = image.width;
	var full_height = image.height;
	var ratio = full_width / full_height;

	var parent = image.parentNode;
	var max_width = parent.offsetWidth - 20;

	if (full_width > max_width) {
		var new_width = max_width;
		var new_height = new_width / ratio;
		image.width = new_width;
		image.height = new_height;
	}
}

// Enfin, on abat nos cartes:

function goForIt() {
	var images_a_reduire = getElementsByClass('redux');

	for (var j = 0; j < images_a_reduire.length; j++) {
		pix = images_a_reduire[j];
		pictureResize(pix);
	}
}
window.onload = goForIt;

Testé avec succès sous Firefox, à voir pour le reste.

Un avertissement cependant: si le parent de l'image (paragraphe, div, cellule de tableau, etc.) a du padding, celui-ci sera pris en compte pour le calcul de la nouvelle largeur de l'image! Car, sauf erreur de ma part, offsetWidth récupère la largeur totale de l'élément et non pas juste la largeur «utile» (celle qui correspond à la propriété width en CSS).

Donc si j'ai ceci côté HTML:

<div>
	<img class="redux" src="ma_super_image_en_1600_x_1200.jpg" />
</div>

et ceci côté CSS:

div {width: 500px; padding: 0 100px;}

...
L'image sera redimensionnée avec une largeur de 700px (largeur totale de l'élément), pour une largeur disponible de 500px seulement (propriété width).

Donc gaffe aux padding un peu trop élevés directement sur le conteneur du texte.
Modifié par Florent V. (27 Dec 2007 - 17:29)

Ben alors, à quoi ça sert que Ducros il se décarcasse?

Florent V. a écrit :
Ben alors, à quoi ça sert que Ducros il se décarcasse?

à quoi je ne sais pas mais à qui j'ai une petite idée, même si c'est pas à celui a posé la question
Bonne année et merci Florent

Florent V. a écrit :
Ben alors, à quoi ça sert que Ducros il se décarcasse?

Salut !

Désolé de ne pas avoir répondu, mais je n'ai pas internet chez moi (le comble pour un développeur web !) et les connexions de mon travail (gendarmerie) ne fonctionnent que rarement ! Merci pour cette aide, une fois de plus, Florent V.