28114 sujets

CSS et mise en forme, CSS3

[Résolu] Submit avec image et image rollover,

Bonjour,

Je voudrai savoir s’il existe une solution de faire sur un bouton submit image un rollover avec une autre image. Comme sur ce lien mais sans JS, juste en CSS.

Merci par avance
Modifié par mohamed (03 Mar 2007 - 18:01)
Oui tu peux utiliser la pseudo-classe :hover sur (presque) n'importe quel élément. Mais IE6 ne le comprend que sur la balise <a>.

A toi de voir si tu préfères pénaliser les utilisateurs d'IE6 ou ceux qui n'ont pas javascript.
Modifié par <nicolas> (03 Mar 2007 - 12:49)
bonjour Nicolas, juste une petite question HS, concernant ta réponse...

Y a t'il un chiffre officiel sur les utilisateur de IE en % sur la planète ?

++Phil
Modifié par Plaisir (03 Mar 2007 - 13:07)
<nicolas> a écrit :
Oui tu peux utiliser la pseudo-classe :hover sur (presque) n'importe quel élément. Mais IE6 ne le comprend que sur la balise <a>.

A toi de voir si tu préfères pénaliser les utilisateurs d'IE6 ou ceux qui n'ont pas javascript.


Oui c'est ce que j'avais fait dans un 1er temps, mais j'ai laissé tombé a cause d'ie 6 justement.

a écrit :
Y a t'il un chiffre officiel sur les utilisateur de IE en % sur la planète ?


IE 6 est encore plus utiliser que le 7 en tout cas
Modifié par mohamed (03 Mar 2007 - 13:12)
en fait tu n'as pas à faire de choix entre les utilisateur d'IE6 et les autre.
Tu fais:

. a { display:block; height: hauteur de ton image; width: largeur...;
background:ton image; ....}
.a:hoover{ background: ton autre image}


et dans ton code HTML

<a href="#" title="d&eacute;veloppeur web [XHTM / CSS / PHP...]">Ton texte</a>

ensuite tu inseres ta balise a où tu veux et tu auras un effet rool over visible sur tous les navigateurs
Modifié par simon250 (03 Mar 2007 - 14:40)
Salut,
simon250 a écrit :
et dans ton code HTML

<a href="#" title="d&eacute;veloppeur web [XHTM / CSS / PHP...]">Ton texte</a>

ensuite tu inseres ta balise a où tu veux et tu auras un effet rool over visible sur tous les navigateurs
Et peux-tu nous expliquer ce qui se passera si l'utilisateur s'amuse à cliquer sur le texte "Ton texte" ? Smiley cligne

Pour le besoin d'origine, je ne pense pas qu'il soit possible de changer l'image d'un input de type image avec les CSS.

Par contre, une solution JavaScript très légère peut être tout à fait envisagée : il suffit de changer l'attribut src au survol (avec un préchargement éventuel de l'image).

C'est exactement le même problème que pour un rollover sur un lien contenant une image. La solution sera bien moins lourde que celle donnée dans le lien du premier message, et fonctionnera si JavaScript n'est pas disponible.
Pour conclure :

1. Il s'agit d'un bouton d'envoi de formulaire (input, button). Ne pas le remplacer par autre chose qu'un bouton d'envoi de formulaire.

2. L'effet au survol : en Javascript c'est plus simple et beaucoup plus fiable que n'importe qu'elle innommable bidouille CSS qui pourrait être proposée dans ce sujet.

3. Pour les utilisateurs qui n'ont pas Javascript, ils ne verront que l'état normal de l'image. S'assurer que l'état normal de l'image est clair, pertinent, et permet d'identifier l'image comme un bouton d'envoi de formulaire.

4. Garder en tête que cet effet de survol est de l'ordre du superflu, pas de l'essentiel. Les utilisateurs qui le verront (la majorité) trouveront peut-être cela sympathique. Les autres ne doivent pas avoir l'impression qu'il leur manque une information.

C'est bon, on peut marquer [Résolu] ? Smiley cligne
Modifié par Florent V. (03 Mar 2007 - 17:29)
OK, merci à tous.
Je voulais juste m'en assuré pour éviter le JS et parce que ce sont les demandes du client. Il ne veux pas de JS.

Merci encore
mohamed a écrit :
Je voulais juste m'en assuré pour éviter le JS et parce que ce sont les demandes du client. Il ne veux pas de JS.

Dis-lui que c'est du javascript non-obtrusif*, accessible, et que tu as appliqué les meilleurs principes de l'optimisation ergonomique. C'est du baratin, mais ça peut aider (et ça n'est pas plus idiot que « Javascript c'est le mal »).

Ou sinon : « pas de bras, pas de chocolat ». Ah non, pardon : « Pas de Javascript, pas d'effet au survol ». C'est pas compliqué, c'est simplement une contrainte technique (effet voulu non réalisable sans Javascript).

Ou encore : ne pas en parler au client. Faire l'effet en Javascript, et puis voilà. Au besoin, faire une démonstration du comportement sans Javascript pour bien montrer que ça reste accessible et tout.

* Non-obtrusif : affreux anglicisme basé sur non-obtrusive.
Modifié par Florent V. (03 Mar 2007 - 18:26)
a écrit :
Ou encore : ne pas en parler au client.

Ca, ça va être difficile, car c'est de la sous-traitance pour agence. En plus y a une équipe qui passe derrière pour injecter du PHP, donc ça va être un peu chaud.
a écrit :
Dis-lui que c'est du javascript non-obtrusif*, accessible, et que tu as appliqué les meilleurs principes de l'optimisation ergonomique.
ça c'est mieux Smiley cligne

Merci encore, je vais voir ça avec le DA lundi.
Sujet clos
Aller à