Une interface réussie est donc une interface ou on a bien travaillé, du niveau « macro » au niveau « micro ».
Dans ce billet précédent, je parlais de l’idée de mettre plusieurs images pour un bouton :
- Une image pour le bouton au repos ;
- Une image quand la souris passe au dessus du bouton (mouseover) ;
- Une image quand on clique sur le bouton.
Petit détail qui compte : il ne faut pas que le navigateur ait à charger les images lors de l’action. Il faut que les images soient pré-chargées.
Sinon ? L’utilisateur risque d’avoir un effet très désagréable : avoir un bloc blanc qui s’affiche lors de l’action. Et oui, le temps que l’image se charge…
Comment pré-charger les images ?
Une solution (il y en a surement d’autres) : on charge une seule image, qui contient tous les états du bouton, et avec un petit code javascript, on déplace la partie visible en fonction de l’action. C’est assez facile à faire, et ça marche très bien.
Avec le même principe coté CSS et la solution est plus élégante 😛
@ndesaleux> Merci pour cette info. Tu peux récupérer en CSS tous les évènements : mouseover, onclick ?
Je confirme les dires de ndesaleux. Mettre du javascript pour faire ca, c’est vraiment pas propre.
Avec simplement du CSS (et la technique de CSS Sprites) tu peux très bien implémenter ce type de rollover et de bouton enfoncé lors du click.
Deux possibilités :
* Utiliser des balises Mon bouton et définir les styles CSS pour #my_button, #my_button:hover (état rollover) et #my_button:active (état enfoncé)
* Sinon, utiliser simplement le :hover qui est applicable sur tout type d’élément (un div par exemple) sous Mozilla et IE7. En revanche, pour le bouton enfoncé, je ne sais pas si :active fonctionne également sur un .
Si je peux me permettre : http://innovablog.com/design/design-css-rollover-css-image/
Le seul élément à vérifier c’est si l’état active correspond parfaitement au onclick.
Bon, les balises HTML ont été strippées par mesure de sécurité (normal).
Je disais :
* Option 1 : appliquer des styles CSS #my_button, #my_button:hover (état rollover) et #my_button:active (état enfoncé) pour une balise « a » ayant l’id #my_button
* Option 2 : idem avec une balise div, le :hover marchant sous IE7 et Mozilla (doute avec :active)
@Olivier, Julien> Merci pour ces infos.
Ce qui ne me semble pas clair, c’est si on peut gérer l’état enfoncé (clic), séparément de l’état mouseover. En tout cas, ça n’apparait pas clairement dans les (très bons) exemples.
on peut jouer en effet par le biais des css
etat normal:
input[type= »submit »]
etat onmouseover
input[type= »submit »]:hover
etat onclick
input[type= »submit »]:focus
evidemment IE n’aime pas…
Le comportement :hover en feuille de style commence à être géré par IE depuis la V7. L’alternative pour les versions précédentes (à ne pas négliger, nombreux sont les utilisateurs d’IE6) passe par le remplacement de classe en JavaScript !