11548 sujets

JavaScript, DOM et API Web HTML5

Bug IE récupération dimension image [resolu]

Bonjour,

je suis confronté à un petit problème pour lequel je ne trouve pas la solution.
Je cherche à récupérer les valeurs des attributs width et height d'une image, jusque là rien de bien compliqué.

Seulement, mon image est dans un lien que je style pour qu'il fasse une largeur différente de la taille d'origine de l'image et je règle le style de l'image pour que celle si s'adapte à la largeur du lien. Voilà le code :


<a href="image.jpg" style="display:block;width:114px;">
<img src="image.jpg" style="display:block;width:100%;height:100%;" onclick="alert(this.width);" width="570" height="120" />
</a>


Là où ça devient bizarre c'est que sur IE le résultat du onclick n'est pas 570 mais 114 comme si le fait de lui mettre un width 100% modifiait explicitement dans le code la valeur de l'attribut html width.

Si qqun à une idée de comment je peux récupérer cette valeur autrement ou une piste pour éviter ce problème je suis preneur
Modifié par goetsu (27 Aug 2007 - 13:30)
Modérateur
Hello,

Le problème vient bien des styles appliqués et non du code JS donc pourquoi ne pas redimensionner l'image à la bonne taille dans un éditeur graphique ? Ca éviterait d'avoir à affecter ces propriétés CSS.
le img.width retourne la largeur réelle de l'image, si tu veux récupérer la largeur qu'elle fait dans la page, il faut utiliser le offsetWidth
non Gatsu35 offsetWidth me renvoie la taille à l'écran et width ne retourne justement pas la largueur reelle c'est bien là le probleme

koala64 je pense qu'IE fait bien une erreur puisqu'il modifie les valeurs des attributs html au lieu d'appliquer un style sur l'image (sur Firefox et autre pas de problème la valeur renvoyée est bien 570).

Je n'utilise qu'une image redimensionnée en % car je veux faire un effet d'agrandissement qd on clique sur l'image (progressif pas juste passé d'un état à l'autre)
Modérateur
Ben dans ce cas, je ne vois pas d'autre solution que de faire un innerHTML sur le lien et d'analyser la chaîne texte pour extraire les valeurs. Smiley confus
j'ai l'impression que même le innerhtml ne fonctionnerait pas car il change les valeurs dans les attributs.
Sinon je met un class="dimension_570-120" et après on fait des regex pour récupérer les deux chiffres mais là si y a des experts en regex je suis preneur d'un coup de main parce que c'est au delà de mes capacités.
Tu peux essayer :
var width = -1, height = -1;

var o = /(?:^| )dimension_(\d+)-(\d+)(?: |$)/.exec(img.className);
if (o) {
	width = parseInt(o[1], 10);
	height = parseInt(o[2], 10);
}
Sujet clos
Aller à