Clignotement d'image sous Internet Explorer 6

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 :

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

Posté le Wednesday 04 August 2004 dans , .

Commentaires

Ajouter un commentaire

Il n'est plus possible de réagir à cette entrée directement mais si vous pensez que votre intervention peut être intéressante, envoyez-moi votre commentaire, je l'ajouterai ici en votre nom.