28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Je cherche à faire un rollover de texte, de façon à avoir un autre texte affiché lors du passage de la souris.
On trouve tout ce qu'il faut pour faire cela avec les css sur des images, mais je voudrais éviter de faire 2 images pour mes 2 textes (poids et qualité d'affichage ...). Pour la qualité, il y a bien svg, mais pas encore très répandu ...
Merci beaucoup si vous avez une idée.
Bon week end.

Lester.
Modifié par lester (17 Jul 2005 - 11:32)
Bonjour,

En CSS2.0, l'effet est simple, avec quelque-chose comme:


p .over {
display: none;
}
p:hover .roll {
display: none;
}
p:hover .over {
display: inline;
}


<p>
   <span class="roll">Texte 1</span> <span class="over">texte 2</span>
</p>


Mais il repose sur :hover, qu'IE n'implémente que pour les liens : si ton contenu n'est pas naturellement un lien, mieux vaut donc éviter le rollover CSS et passer par javascript.

CSS3 offre un moyen encore plus direct, avec:

p:hover {
content: "ici mon texte qui apparaît au survol"
}

<p>Mon texte par défaut</p>

Mais tu ne peux l'utiliser actuellement que dans Opera, et le contenu généré est médiocrement accessible, gêne le copié collé, etc.

Que ce soit en CSS, en javascript, ou encore avec un simple attribut title, il s'agit de bien mesurer l'intérêt pour ton visiteur :
- si l'information du texte masqué par défaut est utile à la compréhension du contenu, elle doit être disponible dans tous les cas de figure: avec ou sans CSS, avec ou sans javascript, quelque-soit le mode de pointage ou l'absence de dispositif de pointage, l'utilisation éventuelle d'un dispositif d'agrandissement (loupe), etc.
- le dynamisme ne doit pas être obstructif : par exemple, le changement du contenu au survol ne doit pas gêner la sélection (pour copier, imprimer, déclencher une synthèse vocale, etc).
- il ne doit pas provoquer de déplacements d'autres éléments de la page, lorsque le contenu au survol n'a plus les mêmes dimensions que le contenu par défaut.
- il ne doit pas contribuer à rendre plus complexe la consultation du contenu en déroutant le visiteur.

Bref, à utiliser avec modération et beaucoup de précautions. Personnellement, je m'abstiendrais Smiley cligne
Modifié par Laurent Denis (17 Jul 2005 - 11:08)
Bonjour,

Merci pour ta réponse très argumentée.
Effectivement, dans mon cas, ce n'était qu'une bricole. Je laisse tomber, l'intérêt n'est pas à la hauteur des problèmes éventuels.

Merci en tout cas et bon dimanche.

Lester.