Discussion :

[rinuom99]

Bonjour à tous,
j'ai voulu de faire un petit menu simple et j'ai utilisé onmouseover et onmouseout pour changé l'image de chaque item lorsque on passe la souris au dessus, voici le 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
 
 <div id="submenu1">
<!-- InstanceBeginEditable name="menu1" -->
 
	 <div class="lien_menu"><a href="index.php">
		<img id="7" src="images/lien1.png" width="130" height="28" border="0" onmouseover="swapImages(this.id, 1);" onmouseout="swapImages(this.id, 0);"  alt="" style="cursor:pointer"/></a>
		</div>
	<div class="lien_menu"><a href="lien2.php">
		<img id="8" src="images/lien2.png" width="130" height="28" border="0" onmouseover="swapImages(this.id, 1);" onmouseout="swapImages(this.id, 0);"  alt="" style="cursor:pointer"/></a>
	</div>
	<div class="lien_menu">
		<img id="9" src="images/lien3.png" width="130" height="28" border="0" onmouseover="swapImages(this.id, 1);" onmouseout="swapImages(this.id, 0);"  alt="" style="cursor:pointer"/>
	</div>
	<div class="lien_menu"><a href="lien4.php">
	        <img id="10" src="images/lien4.png" width="130" height="28" border="0" onmouseover="swapImages(this.id, 1);" onmouseout="swapImages(this.id, 0);"  alt="" style="cursor:pointer"/></a>
       </div>
	<div class="lien_menu">
		<img id="11" src="images/lien5.png" width="130" height="28" border="0" onmouseover="swapImages(this.id, 1);" onmouseout="swapImages(this.id, 0);"  alt="" style="cursor:pointer"/>
	</div>
	<div class="lien_menu" style="height:30px;">
	      <img id="12" src="images/lien6.png" width="130" height="30" border="0" onmouseover="swapImages(this.id, 1);" onmouseout="swapImages(this.id, 0);"  alt="" style="cursor:pointer"/>
	</div>
 <!-- InstanceEndEditable -->
</div>

pour le fichier css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
div#submenu1 {
   width:130px;
   height:170px;
   background-image:url(../images/menu_1.jpg);
   background-repeat:no-repeat;
   float:right;
}
 
.lien_menu {
  width:130px;
  height:28px;
  float:left;
}

et voici que ce que j'ai obtenu comme affichage
sous FF :


Sous IE 6



d'où il vient ce décalage sous IE ?

merci d'avance

[Bisûnûrs]

Au hasard, et vu le peu d'éléments dont on dispose, je dirais de mettre un display:block sur tes images.

[rinuom99]

Merci Bisûnûrs, oui le manque de display:block qui a causé de ce décalage
merci encore une fois,