scintillement sous IE6

**italiasky** · 18/02/2008, 09h41

Bonjour,

J'observe le phénomène de scintillement sous mon site sous IE6.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
ul#buttons li#small a
{
	width: 22px;
	background: url("../images/button_a_small.png") left top no-repeat ;
}
 
ul#buttons li#small a:hover
{
	background: url("../images/button_a_small.png") 0px -23px no-repeat scroll;
}

En fait c'est lors du survol, l'image est recherchée de nouveau par IE donc pendant ce temps il n'y a plus d'image qui s'affiche ce qui fait l'effet de scintillement.

J'ai cherché et trouvé plusieurs solutions déjà mais je ne suis pas parvenu à combler le problème, à moins que je m'y suis mal pris.
Enfin si quelqu'un connait ce problème et qu'il sait comment réellement le résoudre, merci de m'aider.

Bonne journée
++

Invité · 18/02/2008, 10h21

Bonjour,

Ton problème doit être du au fait que lorsque ta souris survol l'image, l'autre image doit d'abord se charger avant de s'afficher.

La solution est donc de précharger tes images à l'ouverture de ta page.

Une petite recherche sur google plus tard :

Code :

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

1
2
3
4
5
6
7
8
<HEAD> 
<SCRIPT LANGUAGE="JavaScript">
i1 = new Image;
i1.src = "images/monimages1.gif";
i2 = new Image;
i2.src = "images/monimages2.gif";
</SCRIPT>
</HEAD>

Je n'ai pas testé ce code. Dit-moi si cela ne fonctionne pas.

**italiasky** · 18/02/2008, 10h41

Non le problème ne vient pas du chargement de l'image parce que l'image est la même.
En effet sur la même image, j'ai mis l'image de départ et celle du survolement, je la déplace juste pour le survol.

Voici une explication plus détaillée du phénomène : http://www.ultra-fluide.com/ressourc...#scintillement

J'ai essayé de faire ce qui est écrit mais je ne peux modifier la configuration du serveur sur lequel je suis...

Si quelqu'un a une autre idée

Merci quand même
++

Invité · 18/02/2008, 10h52

Excuse-moi, je comprends ton problème maintenant.

As-tu essayé de déplacé l'image en javascript plutôt qu'avec les styles css ? Ca fait peut être un peu bricolage mais il y a des chances que ça fonctionne.

Tu mets un onMouseOver sur ton image qui pointe vers une fonction qui change juste la position de l'image.

Pourrait-on avoir un petit bout de ton code ?

**MasterOfChakhaL** · 18/02/2008, 10h53

Salut,

Peut-être est-ce le cache de ton navigateur qui est désactivé. Tu peux vérifier cela...

Sinon, ce que tu peux faire, c'est créer une seule image qui contient les deux états (normal et hover), puis tu la décales grâce à background-position pour faire apparaître la partie que tu veux...

**italiasky** · 18/02/2008, 11h20

Envoyé par MasterOfChakhaL

Peut-être est-ce le cache de ton navigateur qui est désactivé. Tu peux vérifier cela...

Sinon, ce que tu peux faire, c'est créer une seule image qui contient les deux états (normal et hover), puis tu la décales grâce à background-position pour faire apparaître la partie que tu veux...

Oui en fait, ce bug c'est que avec IE6 quand le cache est désactivé, mais chez beaucoup de personnes, c'est justement désactivé par défaut et la plupart des gens ne connaissent pas.

Pour l'image qui contient les deux états, c'est justement ce que j'ai fait, mais le problème c'est que IE6 va quand même chercher l'image au moment du survol même si c'est une image qu'il avait déja chargé. C'est la le bug ! Lis le lien que j'ai mis dans mon précédent post, c'est plus détaillé !

Bon j'ai trouvé une parade. N'ayant pas eu envie de m'embarquer dans du javascript juste pour IE6.

J'ai fait une feuille de style spéciale pour IE6 pour ces cas la que je charge avec les commentaires conditionnels.
Et ce que je fais en fait, c'est mettre en fond du <li></li> l'image du survol, et le <a></a> l'image normal.
Ainsi, au survol du <a>, j'enleve le background du <a>, du coup, apparait l'image du survol qui était déja présente dans le fond du <li>...

Je ne sais pas si c'est claire ? lol

Enfin, comme ca je ne fais pas trop de changements sur le reste mais juste une feuille de style pour IE6 avec ces petites modifs.

Merci de votre aide
++

Invité · 18/02/2008, 11h33

Plutôt malin comme technique. Tu viens d'atteindre le grade de bricoleur italiasky !

N'oublie pas le tag résolu et bonne journée

scintillement sous IE6

CSS

Vue hybride

Discussions similaires

Partager

Partager