Problème de clignotement sous IE

**Gunn_** · 19/07/2006, 15h57

Bonjour à tous,

Je suis entrain de faire un petit script pour faire des boutons en javascript et css. Voilà mon code source:

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
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 =)

**SpaceFrog** · 19/07/2006, 16h05

tout d'abord une initialisation des td s'impose soit avec le classnale dasn les balises soit avec :

Code :

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

1
2
3
td {background: #ff0000;
padding: 10px;
}

ensuite as tu un preload de l'image ?

**Gunn_** · 19/07/2006, 16h24

Je viens d'initialiser les td, j'ai aussi préchargé l'image, le résultat n'est pas mieux. En cherchant un peu sur les byzareries d'IE, j'ai trouvé en fait que lorsqu'il y a des images en fond qui sont ammenées à être changées, IE ne les garde pas en cache et les recharge à chaque fois. Le clignotement serait alors dû au temps que le serveur met pour transmettre l'image à chaque fois.

Il y a moyen de modifier ce comportement sous IE: Outils > options internet > fichiers internet temporaires > paramètres et il faudrait choisir Automatiquement pour bien faire. Seul problème, je ne crois pas que cette option soit sélectionné par défaut sur internet explorer... il recharge à chaque fois l'image :/

Une solution ?

**FremyCompany** · 19/07/2006, 16h30

Utilise un petit truc à moi :
1) En tant que variable globale :

Code :

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

var rechange_timer=-1;

2) La ou tu faisait rechange :

Code :

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

rechange_timer= setTimeout('rechange()',100)

3) La ou tu faisait change :

Code :

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

try { clearTimer(rechange_timer) } finally { change() }

**SpaceFrog** · 19/07/2006, 16h38

ne pas mettre d'image de fond mais une balise image ...

**FremyCompany** · 19/07/2006, 17h51

Envoyé par SpaceFrog

ne pas mettre d'image de fond mais une balise image ...

Le problème n'est pas la...
En fait, il y a un petit espace entre chaque TD, et quand la souris entre dans ce petit espace, les navigateurs considèrent qu'elle sort du controle
De ce fait, la fonction rechange est exécutée
Comme la souris continue son déplacement, elle arrive dans la 2e TD, d'ou l'execution de change.
Resultat : il y a un leger sintillement, du au momment de battement entre rechange et change...
Pour eviter cela, j'utilise le timer... Ainsi, je laisse 100ms à la souris pour "re"-rentrer dans le controle
Une autre methode, c'est d'utiliser

Code :

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

border=0 cellpadding=0 style="boder: none 0px transparent"

mais je n'ai jamais testé

__________________
En passant soit dit j'aime bien ton nouvel avatar !

**Gunn_** · 19/07/2006, 18h58

J'ai pas compris comment on implentait la technique du timer

J'ai essayé mais ça clignote toujours voir même plus qu'avant.

Sinon j'ai regardé sur le nouveau Yahoo! Mail, ils ont des boutons similaires à ce que je voudrais faire. Et ils ont réussi à tout bien faire fonctionner sur IE (en même temps c'est Yahoo me direz vous :p).

J'ai regardé un peu leur code source, et dans une balise td du bouton, ils ont une classe dans le genre: <td class=".monBouton .monBoutonOver">Bouton</td>

Dans la classe .monBouton, ils définissent l'image de fond avec background-image. Cette image est en fait une image double (elle contient l'image normale, et au dessus l'image qui apparait quand on passe la souris). Ils initialisent la position du background à 0px 0px. Puis dans la classe .monBoutonOver, il apparait uniquement le background-position, qui décale le fond de n pixel pour faire apparaitre l'autre image. bref jusque là, rien de très ennuyeux.

Le truc que j'ai du mal à piger, c'est le fait d'activer .monBoutonOver seulement lorsque la souris passe sur l'élément. Je pense que l'attitude normale du script actuel aurait tendance à attribuer au TD les éléments de la classe .monBouton, puis les éléments de la classe .monBoutonOver (arrêtez moi si jme trompe). Si vous y voyez plus clair, faites signe ^^.

**SpaceFrog** · 19/07/2006, 21h09

ben si le problème vient du passage sur le bordures pourquoi ne pas declencher uniquement sur le tr .... et pas sur les td ... ?

**Gunn_** · 19/07/2006, 21h28

En fait, les TD me servent ici à pouvoir placer des backgrounds différents dans chacune des cellules (par exemple des arrondis aux extrémités). Ce qui ne serait pas possible en utilisant la balise TR.

**SpaceFrog** · 20/07/2006, 08h31

en fait je veux dire conserver les background des td mais utiliser seulement le onmouseover et onmouseout des tr ...

**SpaceFrog** · 20/07/2006, 08h31

sinon bordercollapse ça n'aiderait pas ?

**Gunn_** · 20/07/2006, 09h04

Salut,

Pour bordercollapse, pas plus de résultat. Même en essayant de mettre toutes les bordures du tableau à 0, l'effet de clignotement apparait toujours lorsqu'on passe d'un td à un autre. Sinon, les onmouseover et onmouseout ne sont pas sur les TD, je les ais mis sur la balise <table> (voir exemple du code ci-dessus).

Merci de ta contribution en tout cas =)
Si vous avez d'autres propositions n'hésitez pas, je cherche aussi de mon côté, si je trouve quelquechose d'interessant, je ne manquerai pas à le faire savoir =)

**SpaceFrog** · 20/07/2006, 09h09

Il ne reste que la solution de fremy, c'est a dire retarder le declenchement du swap au moyen d'un setTimeout de sorte que lorsque le curseur passe sur une bordure il attende de voir si le curseur arrive sur un autre td ...
si le curseur arrive sur un autre td, on annule le changement, sinon le changement s'opère ...

**Gunn_** · 20/07/2006, 09h41

Je ne vois pas trop comment son code fonctionne... Pourrais tu m'aider ? Je ne vois pas où il détecte que le curseur arrive sur un autre td :/

Merci

**SpaceFrog** · 20/07/2006, 11h02

suffit de lancer le setTimeout sur le onmouseout du td et le clearTimeout sur le onmousover ....

Problème de clignotement sous IE

JavaScript

Discussions similaires

Partager

Partager