Il y a des règles fondamentales pour bien intégrer une maquette graphique en xHTML, afin qu'il soit bien accessible à tous et aux moteurs de recherche notamment, mais aussi qu'il fonctionne sur la majorité des navigateurs.

Une première chose fondamentale concerne les liens en image, une image avec son texte intégré ne doit être créée que dans le cas ou l'on ne peut pas écrire avec la police utilisée en xHTML.

Un exemple avec un menu en image, 2 manières possible, mais une seule réellement intéressante :

  • La première méthode consiste à mettre les images dans le document xHTML et leur mettre l'attribut alt pour définir le contenu de l'image 
    <a href="#" title="Mon menu 1">
   <img src="#" alt="Mon menu 1" />
</a>
    Cette méthode est utilisable, si l'on désactive les feuilles de styles on aura toujours l'image, mais ce n'est pas la meilleure méthode sémantiquement parlant.
  • La meilleure méthode consiste à mettre un style sur le lien pour rendre le texte invisible, et appliquer l'image. Ainsi si la feuille de style est désactivée on se retrouvera bien avec un menu en texte avec lequel tout le monde peut naviguer facilement.

    Je vois 2 solutions pour cacher le texte (il en existe peut-être d'autres), la première consiste à bidouiller en mettant le texte en font-size:1px; 
    <a href="#" title="Mon menu 1" class="menu1">Mon menu 1</a>
    Le css ressemblera à cela : 
    .menu1 {
background-image....
font-size:1px;
color...
}
    Mais la meilleure solution consiste a ajouter un élément inline dans le lien pour le rendre invisible en CSS (si on définissait le display directement sur le lien on ne verrait pas l'image) : 
    <a href="#" title="Mon menu 1" class="menu1"><span>Mon menu 1</span></a>
    Et le css : 
    .menu1 {
background-image....
}
.menu1 span {
display:none;
}

Maintenant une technique plus visuelle, avec la question des png transparent et ce fameux bug sous IE <= 6.0 qui ne les accepte pas, on pourra espérer que à la sortie de IE 7 tout le monde migrera vers la nouvelle version (ou encore mieux sous firefox) mais cela ne se fera pas en un jour...

Il y a un script javascript que tout le monde connait et qui permet d'appliquer un filtre sur les images png pour les rendre transparentes (qu'elles en aient besoin ou pas) mais l'on peut rencontrer des problèmes et notamment :

  1. Des liens qui ne fonctionnent plus si ils sont au dessus d'une image transparente, une solution possible est de mettre la position du lien en relatif.
  2. Des images non transparente qui sont déformées par le filtre.

Ce qu'il faut faire :

  • Si le site n'a pas besoin d'images transparentes, vous pouvez tout mettre en png, c'est le meilleur format pour le web (il serait toujours utilisé sans ce problème de transparence).
  • Vous avez besoin d'images transparentes, mettez tout votre sites en jpg ou en gif et ne mettez que les images qui en ont besoin en transparence, vous éviterez ainsi de nombreux bugs.

Pour finir je vous met un lien vers la source du script javascript de correction qui ne s'activera que sous IE