Rollover image

Bonjour, est-il préférable pour faire un rollover sur une image, d'employer les comportements de Dream en javascript ou faut-il rester dans une logique CSS ?

A +
Modifié par renato (20 Feb 2007 - 22:18)

Bonjour,

Vous risquerez nettement moins de commettre des dégats d'accessibilité en javascript, d'une manière générale.
Modifié par Laurent Denis (20 Feb 2007 - 19:42)

Si le rollover ne concerne qu'une image de fond (l'information principale étant un texte présent dans le code HTML), rollover en CSS.

Si le rollover concerne une image qui porte une information (un bouton de menu, par exemple), rollover Javascript.

En fait, c'est juste un Rollover simple avec deux images.
- Au survol de la 1ère image une deuxième apparaît (en fait la même mais avec des changements de couleurs).

A +

renato a écrit :
En fait, c'est juste un Rollover simple avec deux images.
- Au survol de la 1ère image une deuxième apparaît (en fait la même mais avec des changements de couleurs).

Hello,

Ce ne serait pas exactement ce que l'on propose dans les tutoriels ?

Raphael a écrit :

Ce ne serait pas exactement ce que l'on propose dans les tutoriels ?

je cite le tuto en question:

a écrit :
Il est cependant possible de masquer ce texte en CSS de façon à ce qu'il demeure présent dans le code HTML, mais invisible sur les navigateurs graphiques.

Et j'ai mal à mon accessibilité, justement

J'ai fait le tuto :
http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique[/url]
Cela fonctionne, c'est super. Mais moi, pour mon exemple je n'ai pas d'item à mettre, je n'ai que des images (5).
Donc, est-ce que je dois malgré tout faire une liste, car comme je n'ai pas de liens, je ne peux pas prendre la main sur l'élément <a>.
A +

Tu vas avoir des images réactives au passage de la souris, mais qui ne sont pas des liens ? Attention à ne pas perturber l'utilisateur, qui pourrait justement croire que cette interactivité invite au clic...

Si tu n'as pas d'éléments a, c'est une raison supplémentaire pour utiliser Javascript.

S'il ne s'agit de faire qu'un pur effet de roll over sur une image sans qu'il n'y ait de lien, alors c'est tout simplement du fun.

Le javascript pour faire du fun il n'y a vraiment pas mieux. Les css par contre pour le fun c'est un coup à se foirer grave (je n'est pas vérifié où en est IE7 sur l'implémentation de la pseudo classe hover en dehors des <a> mais jusqu'à IE6 c'est un désastre. D'un autre coté IE6 est mort, en sursis certes mais mort quand même) au point d'en devenir trolleur impénitent, à éviter donc...

Bon évidemment si tu vises du fun "pur" il y aura bien un apprenti gourou pour te le reprocher, en étant sur d'avoir raison mais sans savoir pourquoi.

Dans ce cas la technique la plus éprouvée consiste à regarder ailleurs, à penser à autre chose, à utiliser les smileys qui sifflotent...

Donc fonce dans le javascript et vive la vie

Bonjour, si j'ai bien des liens mais les liens ne sont pas sur des mots qui viendrait par dessus les images mais ces liens sont sur les images.
Et donc, l'effet c'est :
- Au survol d'une image (sans texte) une deuxième apparaît et là on clique pour appeler la page en question.

En fait, pour être encore plus clair, je souhaite faire ce que je fais sans problème depuis des années avec Dreamweaver lorsque je fais :
- Insertion / Image survolée et j'appelle 2 images, pas plus compliqué que ça.
La question était donc, comment faire ce même effet en CSS ?
A +

Bonjour,

Dans ce cas, la situation est simple: le roll-over ne peut pas être fait avec CSS sur un élément <img>. Continuer à le faire en javascript.

bonjour, moi aussi je veux faire ce type de roll over sauf que moi mon image de fond contient déja le titre du menu (car j ai utilisé une police spéciale donc pas le choix)

donc voila j aimerai que cette image puisse etre changé lorsque je passe la souris dessus

y a til un tutoriel en css qui s adapte à mon cas?, j ai lu les tutoriaux du site mais ceux ci prennent pour exemple que le titre du menu soit ecrit dans le fichier html et donc moi ca ne m interesse pas vu que mon titre est donc déja écrit sur le fond du bouton

qqun a une solution à me suggérer? car j aimerai bien si possible éviter le javascript que je ne connais pas vraiment

merci d avance

tony k a écrit :
mon image de fond contient déja le titre du menu

Ce n'est donc pas une image de fond (accessoire, décorative) mais une image de contenu (indispensable). Elle sera donc insérée dans le contenu de la page, avec une balise <img src="monimage.jpg" alt="mon texte" />.

tony k a écrit :
donc voila j aimerai que cette image puisse etre changé lorsque je passe la souris dessus

Javascript.

tony k a écrit :
y a til un tutoriel en css qui s adapte à mon cas?

Il y a un tutoriel sur Alsacréations qui propose une solution sans Javascript (il s'agit du tutoriel auquel tu fais référence, dans la partie « Variante »), mais comme dit ci-dessus cette solution n'est à utiliser que pour les images de fond décoratives, par pour des images portant une information textuelle.

tony k a écrit :
qqun a une solution à me suggérer?

Apprendre à faire un rollover image en Javascript.
Sinon, ne pas faire d'effet de survol impliquant une image. On peut par exemple faire changer la couleur d'une bordure d'un pixel appliquée à l'image : on voit alors clairement que l'image est réactive (c'est un lien), et ça ne demande pas d'apprentissage de Javascript. On gagne donc du temps.

Si on veut faire les choses pile comme on les avait imaginées (rollover avec changement d'image) tout en respectant un minimum de règles d'accessibilité, ça demandera un petit investissement pour adapter un tutoriel Javascript à ses besoins, voire pour apprendre les rudiments de ce langage.

merci beaucoup florent V je vais suivre tes conseils et tenter d apprendre les rudiments de javascript pour parvenir au résultat voulu ca me fera encore progresser comme ca

en fait si j etais reticent un peu au javascript c est parce que j avais lu que certaines personnes n arrivaient pas a lire le javascript , peux tu me rassurer sur cela en me disant que c est une infime minorité?

tony k a écrit :
en fait si j etais reticent un peu au javascript c est parce que j avais lu que certaines personnes n arrivaient pas a lire le javascript , peux tu me rassurer sur cela en me disant que c est une infime minorité?

C'est une minorité, mais peut-être pas « infime » (on donne souvent le nombre 10%, parfois un peu moins... pas sûr que ça soit une estimation fiable).

Il faut raisonner ainsi : le contenu et les fonctionnalités proposées doivent être accessibles, autant que possible, avec Javascript désactivé. Dans ton cas, où est le problème si tes boutons ne changent pas d'aspect au survol ? C'est moins joli, peut-être moins efficace pour repérer qu'il s'agit de boutons (c'est à dire probablement de liens hypertexte), mais ça n'empêche pas de cliquer sur le lien. Donc tout va bien.

Tant que vous ne jouez pas à modifier la propriété cursor sur les liens et qu'il n'y a pas d'information spécifique dans l'image de hover ( ), l'absence de rollover sans javascript n'est en rien problématique.

ah ok la je suis rassuré car en fait j imaginai que l internaute verrait alors une sorte de message d erreur a la place du bouton la ca aurait ete très embetant

mais si ca n est que ca alors c est pas très grave

Bonjour,

Je ne maitrise pas trop le JavaScript (en apprentissage) mais j'ai un code pour mon site qui me pose problème. J'essaye de mettre 2 rollovers sur la même page actuellement et par la suite j'en aurais plusieurs (je ne sais pas si c'est faisable) et je ne sais pas comment disposer la partie JavaScript (j'ai essayé pas mal de combinaison, et cela fait 2 jours que je lutte)... Voici mon code :

<SCRIPT LANGUAGE="Javascript">
<!--
monrollover= new Image( );
monrollover.src="Image2.jpg";
//-->
<!--
monrollover= new Image( );
monrollover.src="Image3.jpg";
//-->
</script>

Je sais que mon code n'est pas bon, car aucun rollover ne fonctionne là, mais si je n'en mets qu'un :
<SCRIPT LANGUAGE="Javascript">
<!--
monrollover= new Image( );
monrollover.src="Image2.jpg";
//-->
</script>

La ça fonctionne.

Pourriez-vous m'aider svp car je bloque

Merci d'avance,

MJ92

Bonjour,

Étant donné qu'il s'agit d'un problème différent (bien que la thématique soit la même), il serait préférable de créer un nouveau sujet plutôt que de réanimer celui-ci.

Merci donc de créer un sujet tout beau tout neuf dans ce même salon, ou bien directement dans le salon Javascript.

Merci d'avance.