Problème Onmouse Over/Out

Version imprimable

Bonjour !
Je code un site web et j'aimerais faire des liens avec une image qui change si on passe la souris dessus (onmouseover).
Cela marche parfaitement mais sous IE ! Sous mozilla rien ne s'affiche oO

Le fichier en include dans mes pages du site :

Code:

1
2
3
4
5
6
7
8
9
<div id="menu">
<p class="centrer"><b><u>Service commercial SOCIETE</u><b></p>
<p><a href="Accueil.php" ><img src="Images\AccueilOut.jpg" border=0 onmouseover="this.src='Images/AccueilOver.jpg';" onmouseout="this.src='Images/AccueilOut.jpg';"></img></a></p>
<p><a href="Ajout.php" ><img src="Images\AjouterOut.jpg" border=0 onmouseover="this.src='Images/AjouterOver.jpg';" onmouseout="this.src='Images/AjouterOut.jpg';"></img></a></p>
<p><a href="Liste.php" ><img src="Images\ListeOut.jpg" border=0 onmouseover="this.src='Images/ListeOver.jpg';" onmouseout="this.src='Images/ListeOut.jpg';"></img></a></p>
<p><a href="Rechercher.php" ><img src="Images\RechercherOut.jpg" border=0 onmouseover="this.src='Images/RechercherOver.jpg';" onmouseout="this.src='Images/RechercherOut.jpg';"></img></a></p>
<p><a href="Options.php" ><img src="Images\OptionsOut.jpg" border=0 onmouseover="this.src='Images/OptionsOver.jpg';" onmouseout="this.src='Images/OptionsOut.jpg';"></img></a></p>
<p><a href="Deconnection.php" ><img src="Images\DecoOut.jpg" border=0 onmouseover="this.src='Images/DecoOver.jpg';" onmouseout="this.src='Images/DecoOut.jpg';"></img></a></p>
</div>

Mon seul et unique CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body
{
	margin:auto;
	background-color:#FFFFFF;
 
}
 
#menu	
{	
	float:left;
	margin-top:4px;
	margin-down:4px;
	width:200px;
	padding:8px;
	border-style:solid;
	border-color:black;
	border-width:3px;
	font-size:20px;
	background-color:#143878;
	color: white;
}

Le chemin des images est correcte, mais je ne comprend rien aux différences de traitements IE/MOMO :?

Bonjour algabow,

Je n'ai pas regardé à fond, mais je peux déjà te signaler quelques anomalies dans ton code :

margin-down:4px; : ça n'existe pas, c'est margin-bottom
<img ...></img> : on n'utilise pas une balise image de cette façon, mais plutôt <img ... />

Enfin, tu peux mettre " img { border: 0; } " dans ton CSS, cela évitera de mettre border="0" à chaque balise img ;)

Ça donne ce qui suit une fois les corrections apportées :

Code:

1
2
3
4
5
6
7
8
9
<div id="menu">
<p class="centrer"><b><u>Service commercial SOCIETE</u><b></p>
<p><a href="Accueil.php" ><img src="Images\AccueilOut.jpg" onmouseover="this.src='Images/AccueilOver.jpg';" onmouseout="this.src='Images/AccueilOut.jpg';" /></a></p>
<p><a href="Ajout.php" ><img src="Images\AjouterOut.jpg" onmouseover="this.src='Images/AjouterOver.jpg';" onmouseout="this.src='Images/AjouterOut.jpg';" /></a></p>
<p><a href="Liste.php" ><img src="Images\ListeOut.jpg" onmouseover="this.src='Images/ListeOver.jpg';" onmouseout="this.src='Images/ListeOut.jpg';" /></a></p>
<p><a href="Rechercher.php" ><img src="Images\RechercherOut.jpg" onmouseover="this.src='Images/RechercherOver.jpg';" onmouseout="this.src='Images/RechercherOut.jpg';" /></a></p>
<p><a href="Options.php" ><img src="Images\OptionsOut.jpg" onmouseover="this.src='Images/OptionsOver.jpg';" onmouseout="this.src='Images/OptionsOut.jpg';" /></a></p>
<p><a href="Deconnection.php" ><img src="Images\DecoOut.jpg" onmouseover="this.src='Images/DecoOver.jpg';" onmouseout="this.src='Images/DecoOut.jpg';" /></a></p>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
margin:auto;
background-color:#FFFFFF;
}
 
img {
border: 0;
}
 
#menu {
float:left;
margin-top:4px;
margin-bottom:4px;
width:200px;
padding:8px;
border-style:solid;
border-color:black;
border-width:3px;
font-size:20px;
background-color:#143878;
color: white;
}

PS : t'indique-t-il une erreur JavaScript là où ça ne fonctionne pas ?

11/03/2009, 10h44
Macmillenium

Bonjour,

Ta syntaxe js est correcte il n y a pas de raison pour que cela ne marche, as tu une page en ligne ?