désolé encore pour ce multi post mais j'ai la solution
Le but est d'avoir un bouton informatif avec une image et un effet de rollhover mais faire en sorte que l'utilisateur puisse accéder au contenu textuelle lié à l'image si besoin. Et sans utiliser la fonction de javascript rollover.
J'avais vu plusieurs solutions sur ce forum mais elles ne me convenaient pas. ( sur cette article sur alsacréations
Remplacement d'images : halte au display none ! de Raphael sur le sujet, de la discussion de 2005 liée à cette article sur l'association d'un contexte à un bouton avec effet de rollhover en utilisant seulement des image en background, et du text-indent ou du display:none pour masquer le contexte lié à l'image dans le lien. Même chose ailleurs sur le web les solutions étaient toutes similaires)
Le contenu de l'information se trouve sur l'image du bouton, dans l'attribut "alt" mais également sur le background du <a> (j'évite de mettre une information différente sur le hover du <a> mais juste un effet visuel).
En faisant un mix des css cités plus haut (à partir d'une image de 100*100px (urlimage.jpg dans l'exemple) et d'une image alternative de 100*200px pour sa version hover(urlimagehover.jpg dans l'exemple)) j'applique une taille de 0px à l'image via le css et ne s'affiche donc que le background de l'<a> placé en absolu ainsi que son hover.
L'image urlimagehover.jpg contient dans sa partie supérieure la même image que celle d'urlimage.jpg et dans sa partie inférieur la version hover de cette image. (technique mentionnée plus en détail ailleurs sur ce site). Le hover du <a> va afficher grâce à la propriété background-position l'image en version hover.
<div id="image"><a id="hoverimage" href="urllien" title="urllien"><img src="urlimage.jpg" alt"blablabla"></a></div>
#hoverimage img {
width: 0px;
height: 0px;
}
#image {
position: relative;
width: 100px;
height: 100px;
}
#hoverimage {
width: 100px;
height:100px;
}
a#hoverimage {
position: absolute;
top:0;
left:0;
background: url(urlimagehover.jpg);
}
a#hoverimage:hover {
background-position: 0 -100px;
}
Du coup si les images sont désactivées dans le navigateur on voit tout de même son alternative textuelle puisqu'elle occupe la zone définie par le bloc du <a>. On pourrait même appliquer un background de couleur en plus de l'image avec une couleur de texte contrastée (dans le
background: url(urlimagehover) #couleur1; du a#hoverimage et de sa version hover pour un effet plus stylé pour différencier la zone occupée par le bouton)
De même si le css est désactivé, l'effet hover et la taille fixée à 0px disparaissent et l'image réapparait sous sa forme d'origine, donc tout le monde est content.
Plus de flicker avec ce css contrairement aux précédents que j'avais mis plus haut, ca a l'air de marcher sur les dernières versions d'ie, ff, opera. Jaws lit également le contenu de l'image. Mais pensez-vous que le #hoverimage img {width: 0px; height: 0px;} pourrait poser un problème de compatibilité sur d'autres navigateurs (ou version antérieures) et lecteurs?
Safari et Chrome n'affichent pas l'alt.
Avec ce code, Opéra et IE font déborder le texte du alt en dehors de la boîte en absolute qui contient le tag <img> sur une même ligne, alors que Firefox s'adapte à la largeur de la boîte parente.
Seuls Firefox et Opera peuvent attribuer une typo à l'alt en fonction de ce qui est défini dans le bloc parent.
Quelqu'un pourrait-il confirmer si un tel code lit bien l'alt de l'image sur les lecteurs Hal, Homepage reader, Outspoken et windows eyes? (que je ne possède pas)
ps : si un modérateur pouvait effacer mes précédents messages, apparemment j'avais un problème de cookie avec le site et le bouton éditer n'apparaissait pas (je n'avais que "citer"), encore désolé pour ce multiposting, j'ai condensémes messages dans celui-ci.
C'est fait 
Modifié par vahadar (15 May 2010 - 20:57)