Discussion :

[BeatGrinder]

Bonjour,

je suis chargé d'afficher plusieurs images provenant d'une base de données, donc rapatriées dynamiquement (en fonction d'une recherche).
Voulant afficher des vignettes, je les redimensionne avec javascript. Je leur donne donc un identifiant, qui est leur id dans la base.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo "<img src=\"".IMAGE_HOST."/Vignettes/".$photo["id_photo"].".jpg\" id=\"".$photo["id_photo"]."\" />";

Ensuite, dans ma fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function vignette(idV) {
    var echelle = 80;
    var largeur = document.getElementById(idV).width;
    var hauteur = document.getElementById(idV).height;
    var rapport = (largeur > hauteur) ? echelle/largeur : echelle/hauteur;
    if(largeur > hauteur) {
        document.getElementById(idV).width = echelle;
        document.getElementById(idV).height = hauteur*rapport;
    } else {
        document.getElementById(idV).height = echelle;
        document.getElementById(idV).width = largeur*rapport;
    }
}

Ce code marche correctement sous Firefox, mais sous Internet Explorer, il n'affiche rien ! J'ai essayé d'afficher les dimension initiales de l'image sous IE, et il affiche "0" et "0"...Autant dire que je suis particulièrement déboussolé, surtout que j'ai une autre page de manipulation d'image qui fonctionne très bien sous IE avec un id...

En bref, je suis dans le jus, ça m'a l'air tout bête, mais je ne sais pas du tout comment arranger ça...je n'ai rien trouvé en effectuant des recherches sur internet ou sur le forum...

Merci !

[E.Bzz]

Bonjour,
et en ajoutant l'unité ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById(idV).width = echelle + 'px';
document.getElementById(idV).height = (hauteur*rapport) + 'px';

A+

[BeatGrinder]

Désolé, quand je rajoute les unités des dimensions, ça ne fonctionne plus, ni sur Firefox, ni sur IE (c'est-à-dire : rien ne s'affiche).

Merci quand même, je n'y avais pas pensé...

EDIT :

Je viens de trouver une solution qui fonctionne sur les deux navigateurs :

dans mon cas, puisque je souhaite redimensionner l'image en fonction de sa hauteur ou de sa largeur (suivant la forme de cette image), je fixe la hauteur (resp. la largeur) à une valeur fixée (var echelle), puis la largeur (resp. la hauteur) en fonction d'un rapport de dimensions.

La solution consiste à seulement fixer la hauteur (resp. la largeur) à la valeur fixée echelle. Le reste s'ajuste automatiquement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function vignette(idV) {
	var echelle = 80;
	var largeur = document.getElementById(idV).width;
	var hauteur = document.getElementById(idV).height;
	//var rapport = (largeur > hauteur) ? echelle/largeur : echelle/hauteur;
	if(largeur > hauteur) {
		document.getElementById(idV).width = echelle;
		//document.getElementById(idV).height = hauteur*rapport + 'px';
	} else {
		document.getElementById(idV).height = echelle;
		//document.getElementById(idV).width = largeur*rapport + 'px';
	}
}

Malheureusement, certains affichages d'images ne se font pas correctement (à peu de choses près), c'est-à-dire que les dimensions d'arrivée ne sont pas exactement proportionnelles à celles de départ...Je me satisferai de ça pour le moment, mais je suis curieux de comprendre ce phénomène. Si quelqu'un a une explication, je suis intéressé !

Merci.

[E.Bzz]

Arf !
.style.width
.style.height



A+

[BeatGrinder]

Avec style.width et style.height, j'obtiens le même résultat que la solution que j'ai citée avant, sur Internet Explorer. Sur Firefox, les images ne sont pas redimensionnées...merci tout de même !

A plus

[E.Bzz]

Avec style.width et style.height, j'obtiens le même résultat que la solution que j'ai citée avant, sur Internet Explorer.

Il n'empêche qu'il s'agit d'attributs de style ....
Ca devrait mieux fonctionner avec la syntaxe prévue pour les objets "images" ...

A+

[BeatGrinder]

Bonjour,

j'ai de nouveau un problème avec les images, mais cette fois sur Firefox ET Internet Explorer.
C'est au niveau de l'affichage des images que ça pose un problème :

- Sur Firefox, quand j'ouvre mon navigateur, donc que le cache est vide, les images ne s'affichent pas après le passage dans la fonction javascript. Notons que si je n'exécute pas la fonction javascript, les images s'affichent (mais en taille réelle...embêtant puisque normalement j'exécute la fonction "vignette"...).
Lorsque j'exécute la fonction javascript "vignette", j'affiche la taille des images. J'obtiens '0' en largeur et autre chose en hauteur... (en général '13'). Donc c'est normal que quand je redimensionne, ça ne s'affiche plus...Reste à comprendre pourquoi j'obtiens 0...

Dernière chose : quand les images ne s'affichent pas, si je rafraîchis la page, elles s'affichent et tout fonctionne !

- Sur Internet Explorer, autre chose bien sûr ! L'affichage de la taille d'une image donne '0' par '0'...Insoluble...En rafraîchissant, rien de nouveau...
Le seul moyen d'afficher les images (sous forme de vignette) est de redimensionner seulement un côté. L'autre se calcule tout seul, mais souvent de manière incorrecte (en tout cas pour ce que je veux faire...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function vignette(idV) {
	var echelle = 80;
	var largeur = document.getElementById(idV).width;
	var hauteur = document.getElementById(idV).height;
	alert(largeur+'x'+hauteur); //ici '0x0' chez IE et '0x13' chez FF
	var rapport = (largeur>hauteur) ? echelle/largeur : echelle/hauteur;
	if(largeur > hauteur) {
		document.getElementById(idV).width = echelle;
		if(navigator.appName == 'Netscape') { //si Mozilla alors
			var newHauteur = rapport*hauteur; //on redimensionne le
			document.getElementById(idV).height = newHauteur; //second côté puisque sur IE ça ne s'affiche plus sinon...
		}
	}
	else {
		document.getElementById(idV).height = echelle;
		if(navigator.appName == 'Netscape') {
			var newLargeur = rapport*largeur;
			document.getElementById(idV).width  = newLargeur;
		}
	}
}

Note : l'utilisation de document.getElementById(idV).width ou bien document.images[idV].width, ou encore [...].style.width, donne le même résultat...à noter que [...].style.width ne marche pas...

[E.Bzz]

Je te demanderais bien comment tu appelles la fonction, mais vu que tu ne sembles pas décidé à prendre en compte les corrections proposées, je doute que ça serve à grand chose

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById("idimage").style.width;
// ou
document.images["idimage"].width;

A+

[Msieurduss]

Respecte cette syntaxe (style.width), parce que si ça marche maintenant il n'est pas dit que ça marchera sur les versions futures (ta syntaxe étant erronée !) et ensuite ça ne fonctionne pas sur tous les navigateurs... IE et FF sont certes les leaders, mais il y a Safari, Opéra..... etc.

Si style.width ne fonctionne pas, tu dois avoir un problème quelque part... Est-ce que tu peux faire deux choses :
- nous dire comment tu appelles la fonction, comme le suppose E.bzz
- ouvrir la console d'erreur de Firefox, et regarder ce qu'elle affiche. C'est une vraie mine d'or !