18041 sujets

Questions générales et questions de débutants

Remplacement d'image en css ou javascript?

Bonjour, je suis en train de créer un menu qui pour chaque lien remplacera une image par une autre lors du survol de la souris.
Quelle est la meilleure option? Le faire en javascript ou en css? Et pourquoi?
Je précise que je n'ai pas une grande expérience mais qu'après avoir passé du temps sur la question il semble que ce soit surtout un problème d'accessibilité.
Autre question: La solution css pose-t-elle des problème de compatibilité navigateur (ie 6 notamment)?
Merci de vos conseils.
Modifié par moreall (11 Mar 2010 - 09:59)
Salut,

Tout dépend du cas :

- soit tu veux utiliser une image contenant le texte, car tu utilise une typo non web ou tu veux garder précisément une mise en forme.
-> à ce moment là c'est une image dans le code html, et le rollover est fait via javascript.

- soit tu peux utiliser un lien dans un bloc html comportant une image de fond.
-> à ce moment là tu fais un simple changement d'état à l'aide des pseudoclasses en css.
Salut Mikachu,

J'utilise une image contenant le texte et je suis parti sur une option css avec {display:none}.

Mais comme tu le dis, le javascript le fait aussi et j'aimerai connaitre les avantages et les inconvénients des 2 méthodes
Euuuh, une image en css avec un display none n'est pas une solution accessible.
Si ton texte (ou du moins une alternative) ne se trouve pas dans le code html, l'information n'est pas disponible pour tout le monde.
J'ai oublié de préciser dans mon précédent message dans le cas de l'image dans le code html, qu'elle doit posséder un attribut alt reprenant le texte contenu dans l'image. Impossible d'avoir un attribut alternatif viable sans cela.
Mon image se trouve dans le code html, avec son attribut alt.
Voici un extrait du code:

<html>
<a>
<img src="images/enfants.png" class='hover' alt="enfants" />
<img src="images/enfants1.png" class='out' alt="enfants" />
</a>
</html>

<style>
a:hover .hover{display:none}
a:hover .out{display:inline}
</style>

Cette méthode est-elle valable?
Vaut-il mieux le faire en javascript?
Mikachu a écrit :
-> à ce moment là c'est une image dans le code html, et le rollover est fait via javascript.

Il me semblait t'avoir déja répondu. Ca sera plus propre que ta méthode. Smiley cligne
On m'a souvent dit qu'un pourcentage non négligeable d'utilisateurs désactivent le javascript de leur navigateur!
Bonjour,
moreall a écrit :
On m'a souvent dit qu'un pourcentage non négligeable d'utilisateurs désactivent le javascript de leur navigateur!

En dessous de 1% je pense que l'on peut considérer que ces utilisateurs sont "négligeable". Le plus important est de faire en sorte que le menu reste accessible sans JavaScript.
Ok mais je n'arrive pas à comprendre pourquoi la méthode en javascript est plus "propre" que celle en css! Y a t-il quelqu'un qui pourrai m'éclairer à ce sujet?
Modérateur
Bonjour,

Avec ta solution Moreall, on se retrouve à dédoubler les éléments du menu. Techniquement, lorsqu'on désactive les CSS du navigateur, on se retrouve avec un menu comme ça :

Accueil Accueil - Photos Photos - CV CV - Contact Contact.

Ce n'est déjà pas très propre.

Il faut aussi comprendre que les CSS sont destinés pour donner du style aux éléments, et le Javascript pour l'interactivité et le comportement. C'est déjà limite que CSS permettre d'afficher et cacher des éléments au passage de la souris...

Comme j'ai déjà dit il y a plusieurs années, ce n'est pas parce que je peux déneiger ma cour avec mes pieds que je ne devrais pas utiliser une pelle. Smiley smile
Modifié par Tony Monast (08 Mar 2010 - 17:36)
Modérateur
Si tu veux, tu peux t'inspirer de la solution que j'ai utilisé pour mon site. Voir le script oRollover et la fonction FonctionsChargement.

Ensuite, il suffit de mettre dans le même dossier les images sous le format suivant :

- enfants_nm.jpg (état normal)
- enfants_hv.jpg (état hover)

Les images des deux états doivent porter le même nom, à l'exception de la fin : _nm pour l'état normal, et _hv pour l'état hover. Dans FonctionsChargement, il faut ensuite cibler les conteneurs où on veut que le script parcours les images.

C'est une solution plutôt efficace et rapide pour faire des rollovers.

Si tu utilises cette solution, copie le code au complet, ne fait pas de Hotlink vers le script.
Sujet clos
Aller à