pilgrim[.maleo.net]

J'ai été confronté récemment � un problème sous IE6 : les images de fond appliquées � un lien clignotent quand on passe dessus avec la souris ; ceci ne survient ni pour Mozilla, ni pour des versions plus anciennes d'Internet Explorer...

Après quelques recherches sur Internet, il apparaît que cela n'arrive que dans le cas où IE est configuré de manière � ne pas utiliser de cache pour afficher les pages et toujours aller chercher la dernière version (cette option doit être modifiée manuellement et est la plus usité chez les développeurs principalement).

Dans mon cas, il s'agissait de remplacer le texte du titre principal du site par un image sachant qu'un lien existe sur ce titre :

<div id="header">
    <h1><a href="http://www.example.com">Titre du site</a></h1>
</div>

Le code CSS employé utilise la méthode de Phark permettant de masquer le texte d'un élément pour le remplacer par une image de fond, celle-ci étant ici appliquée au lien :

#header h1 a {
    text-indent: -100em;
    overflow: hidden;
}

L'image de fond est ensuite appliquée � la balise h1 et pas au lien comme on aurait pu le penser :

#header h1 {
    background-color: transparent;
    background-image: url(images/title-background.jpg);
    background-repeat: no-repeat;
}

On change maintenant les dimensions du titre et du lien pour les adapter � celles de l'image, il s'agit pour le lien de recouvrir complètement la surface de cette image :

#header h1 {
    background-color: transparent;
    background-image: url(images/title-background.jpg);
    background-repeat: no-repeat;
    width: 260px;
    height: 26px;
}
#header h1 a {
    text-indent: -100em;
    overflow: hidden;
    width: 260px;
    height: 26px;
}

Voil� pour la théorie, pour la pratique je me suis aperçu d'une chose : il semblerait que la position doit être absolue pour le titre et pour le lien; c'est en tout cas ce qui est ressorti de mes tests � ce propos. Le code final est donc :

#header h1 {
    position: absolute;
    background-color: transparent;
    background-image: url(images/title-background.jpg);
    background-repeat: no-repeat;
    width: 260px;
    height: 26px;
}
#header h1 a {
    position: absolute;
    text-indent: -100em;
    overflow: hidden;
    width: 260px;
    height: 26px;
}

C'est maintenant terminé, le texte du lien est bien remplacé par une image (logo du site ou de l'entreprise par exemple) mais on peut voir qu'il s'agit tout de même d'une « bidouille » que nous avons dû implémenté pour un navigateur dont le support des CSS (et des standards web) est plus que basique, grrr... Toujours est-il que cette technique a été testé et fonctionne sous IE5.0, IE5.5, IE6, Mozilla et Opéra.

J'ai collecté depuis quelques articles sur le sujet, je vous les soumet pour informations complémentaires :

• Minimizing Flickering CSS Background Images in IE6 (le plus complet)
• Caching in IE
• IE vs. Image Replacement

Si vous avez d'autres liens, n'hésitez pas � m'en faire part pour que je les ajoute ici.