Discussion :

[maniaco_jazz]

Bonjour à tous,

je fais un site en PHP, mais je pense que mon problème est un problème CSS.

Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
 
	if ($menu == "news") echo "<img src='" . $directory . "images/menu/news.gif'>";
	else echo "<a href='" . $directory . "'><img src='" . $directory . "images/menu/news.png' border=\"0\" onMouseOver=\"javascript:this.src='" . $directory . "images/menu/news.gif'\" onMouseOut=\"javascript:this.src='" . $directory . "images/menu/news.png'\"></img></a>";
	echo "<br/>";
	if ($menu == "groupe") echo "<img src='" . $directory . "images/menu/groupe.gif'>";
	else echo "<a href='" . $directory . "groupe'><img src='" . $directory . "images/menu/groupe.png' border=\"0\" onMouseOver=\"javascript:this.src='" . $directory . "images/menu/groupe.gif'\" onMouseOut=\"javascript:this.src='" . $directory . "images/menu/groupe.png'\"></img></a>";
	echo "<br/>";
	if ($menu == "agenda") echo "<img src='" . $directory . "images/menu/agenda.gif'>";
	else echo "<a href='" . $directory . "agenda'><img src='" . $directory . "images/menu/agenda.png' border=\"0\" onMouseOver=\"javascript:this.src='" . $directory . "images/menu/agenda.gif'\" onMouseOut=\"javascript:this.src='" . $directory . "images/menu/agenda.png'\"></img></a>";

Le menu s'affiche bien, le hic est que sous Firefox, le changement d'image marche alors que sous IE nan... (OnMouseOver/OnmouseOut)

Est-ce que j'ai fait une erreur ? (sûrement )

Merci d'avance.

[Linaa]

Je ne vois pas de CSS dans ce code.
Ce serait plutôt au niveau du JavaScript.
Vois-tu une erreur dans la console ?

[maniaco_jazz]

Euh oui, en fait, je sais pas pourquoi j'ai dit CSS en fait... Parce que ce sont les évènements onmouseOver et onMouseOut (donc Javascript) qui ne s'exécutent pas sous IE ; alors qu'ils marchent parfaitement sous Firefox.

Je n'ai pas de messages d'erreur dans la console, c'est pour ça que je me demande si je n'ai pas oublié quelque chose pour que les évènements marchent aussi bien dans IE et Firefox.

[Kerod]

J'ai testé le même code que toi mais directement en html et ca fonctionne sur les deux navigateurs.de plus tu dis avoir aucunes erreurs..je suppose que c'est également le cas sous IE.

Un conseil exécute la page et regarde le code résultant et là vérifies les liens des tes images car ca doit venir de là et pas du javascript....

hum aussi tu n'es pas obligé de mettre une fermeture de balise </img>

[maniaco_jazz]

En fait, je viens de trouver d'ou vient le problème... Il ne vient pas du code que je vous ai mis

Pour chaque élément de mon menu, j'utilise une image PNG car elle possède des zones de transparence. Pour l'évènement OnMouseOver, j'utilise une image GIF car mon fond d'image est plein et aussi parce que du coup, elle est plus petite en taille (pour le chargement).

Le problème comme vous devez surement le savoir, c'est que sous IE, la transparence des images PNG n'est pas gérée, ce qui fait qu'on se retrouve avec un fond bleu ciel lorsqu'on affiche une image PNG avec de la transparence. Ainsi, j'ai récupéré un bout de code javascript pour faire afficher correctement les images PNG. Et le problème vient de là, car lorsque j'enlève ce bout de code, les évènements se gèrents parfaitement bien sous IE... Je vais donc essayer de bien comprendre ce que fait ce bout de code et essayer de le modifier en conséquence, bien qu'il semble assez complexe...

[gorgonite]

Le problème comme vous devez surement le savoir, c'est que sous IE, la transparence des images PNG n'est pas gérée

classique... en fait avec tout ce qui est css2 mais pas ccs-p
il existe une "verrue" en javascript pour corriger cela...

http://dean.edwards.name/IE7/

[maniaco_jazz]

Merci Gorgonite, il est carrément bien ce pack !

Par contre, j'ai le même problème si je ne nomme pas par défaut mes images PNG "image-trans.png". Même en changeant la variable global.

J'ai changé comme cela, mais ça ne marche pas :

// ** IE7 VARIABLE
// e.g. only apply the hack to files ending in ".png"
IE7_PNG_SUFFIX = ".png";

// regular expression version of the above
var _pngTest = new RegExp((window.IE7_PNG_SUFFIX || ".png") + "$", "i");

Peut-être faut-il changer autre part ou alors j'ai mal changé...

[Kerod]

Testes avec ce code :

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
22
23
24
25
26
27
 
// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
 
function correctPNG() 
{
	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;		
		 	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;
		}
	}
}
 
window.attachEvent("onload", correctPNG);