Notation à étoiles - clignotement sur IE au survol

Bonjour,

J'essaie de réaliser un système de notation à étoiles comme on peut les voir un peu partout maintenant. Donc le principe, c'est 5 étoiles blanches alignées, et au survol, les étoiles deviennent dorées, ensuite il suffit d'un clique pour enregistrer la note dans mysql, mais je ne traîterai pas cette dernière partie dans ce post.

Les images des étoiles sont nommées :
- or_gauche.gif,
- or_droite.gif,
- blanche_gauche.gif,
- blanche_droite.gif.

Avant de vous expliquer le problème, voiçi mes deux fonctions javascript :

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<script type="text/javascript">
<!--
function switch_image_defaut() // quand on ne survole plus d'étoile, la note ($note_moyenne) doit être affichée avec les images
{
     document.getElementById("note_etoile").innerHTML = '<?php echo 'Noter ce jeu : '; 
     for ($i=1; $i <= 5; $i++)
     {
          ?><img id="etoile_<? echo $i;?>"  src="image/<? 
          if ($note_moyenne >= $i) 
          { 
               echo 'or_'; 
          } 
          else 
          { 
               echo 'blanche_';
          } 
          if ($i==1 || $i==3 || $i==5) 
          { 
               echo 'gauche'; 
          } 
          else 
          { 
               echo 'droite'; 
          }
          ?>.gif"
onmouseout="switch_image_defaut();" onmouseover="switch_image(<? echo $i;?>);" />
     <? 
     } // fin boucle
     ?>'; 
}
 
function switch_image(num) // à chaque survol d'une image
{
     var i=1;
     while (i <= 5)
     {
          if (i <= num)
          {
               if (i == 1 || i == 3 || i ==5)
               {
                    document.getElementById("etoile_" + i).src = "image/or_gauche.gif";
               }
               else
               {
                    document.getElementById("etoile_" + i).src = "image/or_droite.gif";
               }
          }
          else
          {
               if (i == 1 || i == 3 || i ==5)
               {
                    document.getElementById("etoile_" + i).src = "image/blanche_gauche.gif";
               }
               else
               {
                    document.getElementById("etoile_" + i).src = "image/blanche_droite.gif";
               }
          }
     i++;
     }
 
}
-->
</script>

Le code html :

Code:

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
 
<div id="note_etoile">
<?php 
echo 'Noter ce jeu : '; 
for ($i=1; $i <= 5; $i++)
{
     ?><img id="etoile_<? echo $i;?>"  src="image/
     <? if ($note_moyenne >= $i) 
     { 
          echo 'or_'; 
     } 
     else 
     { 
          echo 'blanche_';
     } 
     if ($i==1 || $i==3 || $i==5) 
     { 
          echo 'gauche'; 
     } 
     else 
     { 
          echo 'droite'; 
     }
     ?>.gif" onmouseout="switch_image_defaut();" onmouseover="switch_image(<? echo $i;?>);" /><? 
} // fin boucle
?>
</div>

Le problème est donc que, sur IE, il se crée un effet de clignotement lors du survol, dû au fait qu'à chaque onmouseout, j'affiche d'abord la note moyenne (si note_moyenne = 3, trois étoiles dorées seront affichées), suivi de la note qui est en train d'être sélectionnée (si je survol la 5ème étoile, ça va donc afficher 3/5 puis tout de suite après 5/5).

En fait j'ai identifié le problème. Ce n'est pas une lenteur d'ie pour l'affichage des images. Le problème est que quand je passe de etoile_1 à etoile_2, seule le onmouseout s'éxécute (donc l'affichage de la note moyenne), et il faut que je rebouge un peu la souris sur image_2 pour que le onmouseover se déclanche. Pour résumé, au premier pixel dans etoile_2, j'ai seulement le onmouseout de déclanché, vu que j'ai quitté etoile_1, et au second pixel dans etoile_2, j'aurai onmouseover.

Merci d'avance.