11548 sujets

JavaScript, DOM et API Web HTML5

Connaitre les dimensions d'une image masquée

Bonjour à tous,

une petite question simple au premier abord mais j'ai beau cherché je ne trouve pas la réponse...

J'ai des images en PNG qui sont masquées par un display:none,
pour les faire disparaitre le cadre bleu autour sous IE6 j'ai un script qui fait une petite routine et qui corrige ça...

Seulement quand je veux afficher les images cachées elles n'apparaissent pas...
En fait dans le script qui gère les png a besoin des dimensions des images pour les corriger, seulement comme elle sont masquées par un display:none le script n'arrive pas à les récupérer les bonnes valeurs.
Du coup il renvoi à chaque fois 0...
Au début je pensais que c'était lié au png mais même avec des gif masqués il n'arrive pas à prendre les vrais dimensions.

Ma question est donc la suivante : comment puis-je connaitre la taille exacte de mon image si elle est masqué en display:none?

Merci d'avoir pris le temps de me lire...
Modifié par Ryukisai (15 Dec 2008 - 18:22)
Lut,

je me suis mal exprimé, c'est pas un cadre bleu, c'est les couleurs transparentes qui deviennent bleu... bref le problème typique de IE6 pour les png transparents...
est ce que ton script est lancé aprés le chargement de la page? et est ce qu'il marche sur FF?
Salut,

le script est chargé au début de la page puis exécuté par un onLoad sur le body.

Visiblement il ne fonctionne pas sous FF tel quel, il a dut être optimiser pour IE mais pas pour FF
mais quand je simplifie le code, juste pour voir si il arrive à voir les dimensions des images, sous FF même si elles sont masquées il trouve les bonnes valeurs...

Le code de mon JS :

function whichBrs() {
	var agt=navigator.userAgent.toLowerCase();
	if (agt.indexOf("opera") != -1) return 'Opera';
	if (agt.indexOf("staroffice") != -1) return 'Star Office';
	if (agt.indexOf("webtv") != -1) return 'WebTV';
	if (agt.indexOf("beonex") != -1) return 'Beonex';
	if (agt.indexOf("chimera") != -1) return 'Chimera';
	if (agt.indexOf("netpositive") != -1) return 'NetPositive';
	if (agt.indexOf("phoenix") != -1) return 'Phoenix';
	if (agt.indexOf("firefox") != -1) //return 'Firefox';
		{
		alert(document.images.length);
		//***************** GESTION DES IMAGES PNG
		for(var i=0; i<document.images.length; i++){
		  var img = document.images[i]
		  var imgName = img.src.toUpperCase();
		  
		  if (imgName.substring(imgName.length-3, imgName.length) == "PNG" ){
			 alert(img.width);
			 }
		  }
		//***************** FIN GESTION DES IMAGES PNG
	}

	if (agt.indexOf("safari") != -1) return 'Safari';
	if (agt.indexOf("skipstone") != -1) return 'SkipStone';
	if (agt.indexOf("msie") != -1)// return 'Internet Explorer';
	{
		
		//***************** GESTION DES IMAGES PNG
		for(var i=0; i<document.images.length; i++){
		  var img = document.images[i]
		  var imgName = img.src.toUpperCase();
		  
		  if (imgName.substring(imgName.length-3, imgName.length) == "PNG" ){
			 var imgID = (img.id) ? "id='" + img.id + "' " : ""
			 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
			 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
			 var imgStyle = "display:inline-block;" + img.style.cssText
			 if (img.align == "left") imgStyle = "float:left;" + imgStyle
			 if (img.align == "right") imgStyle = "float:right;" + imgStyle
			 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
			 alert(img.width);
			 var strNewHTML = "<span " + imgID + imgClass + imgTitle
			 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
			 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
			 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
			 img.outerHTML = strNewHTML
			 i = i-1
			 }
		  }
		//***************** FIN GESTION DES IMAGES PNG
	}
	if (agt.indexOf("netscape") != -1) return 'Netscape';
	if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
	if (agt.indexOf('\/') != -1) {
		if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
			return navigator.userAgent.substr(0,agt.indexOf('\/'));
		}
		else return 'Netscape';
	} 
	else if (agt.indexOf(' ') != -1)
	return navigator.userAgent.substr(0,agt.indexOf(' '));
	else return navigator.userAgent;
}


Donc à priori ça serait encore une facétie d'IE?[/i][/i]
Modifié par Ryukisai (16 Dec 2008 - 11:01)
Hello,

Si tu a vraiment besoin de connaitre les dimensions des images, tu peux les afficher temporairement pour récupérer les dimensions. Le mieux serait de les réinjecter dans le dom (dans un élément en position:absolute, placé en dehors du viewport pour être sur que ca ne dérangera pas l'internaute), et de les remasquer (et les remettre à leur endroit d'origine si besoin) une fois que tu a eu les dimensions.
Salut,

j'avais effectivement pensé à les afficher, puis les masquer à nouveau mais j'avais peur de que ça perturbe l'affichage...
Mais ton idée n'a pas l'air mauvaise je vais creuser ça...

Merci bien
Peut-être conviendrait-il de s'interroger d'abord sur la largeur des images ?
S'agit-il de celle figurant éventuellement dans la balise HTML ou bien de celle des images de type png ?
Ne serait-il pas plus simple de traiter ces images lorsqu'on les dévoile ?
Modifié par Julien de Prabere (21 Dec 2008 - 15:44)
Sujet clos
Aller à