Problème de clignotement sous IE
Bonjour à tous,
Je suis entrain de faire un petit script pour faire des boutons en javascript et css. Voilà mon code source:
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
| <html>
<head>
<title>Test</title>
<style>
.test {
background: url('images/fond.jpg');
padding: 10px;
}
.test2 {
background: #ff0000;
padding: 10px;
}
</style>
<script>
function change() {
var bouton = document.getElementById("bouton");
bouton.getElementsByTagName("td")[0].setAttribute("className", "test");
bouton.getElementsByTagName("td")[1].setAttribute("className", "test");
bouton.getElementsByTagName("td")[2].setAttribute("className", "test");
}
function rechange() {
var bouton = document.getElementById("bouton");
bouton.getElementsByTagName("td")[0].setAttribute("className", "test2");
bouton.getElementsByTagName("td")[1].setAttribute("className", "test2");
bouton.getElementsByTagName("td")[2].setAttribute("className", "test2");
}
</script>
</head>
<body>
<table id="bouton" onmouseover="change()" onmouseout="rechange()" cellpadding="0" cellspacing="5" border="0">
<tr>
<td>L</td>
<td>Test</td>
<td>R</td>
</tr>
</table>
</body>
</html> |
Un bouton est en fait un tableau avec 3 cellules: la première concerne le bord gauche, la deuxieme le centre avec le texte du bouton, la toisième le bord droit. Le problème apparait uniquement sur IE et pas sur Firefox, je tiens à la préciser. Il intervient lorsque je veux mettre une image en fond lors du onmouseover. Lorsqu'on déplace alors la souris sur le bouton (et plus précisément lors du passage d'un td à un autre), il y a un effet de clignotement de l'image de fond, assez désagréable. Quelqu'un saurait-il d'où ça vient et s'il y a une solution pour y remédier ?
Merci =)
