Image-lien changeant d'aspect.

Bonjour à toute la communauté,

Le titre n'est pas très explicite. Je vais m'efforcer d'être le plus clair possible. Je souhaiterais que l'accès a l'administration de mon script de nouvelles soit rendu possible par une image:



En fait, au passage du curseur sur le bouton graphique central, ce bouton changerait d'aspect (uniquement le bouton graphique et non le reste de l'image) et serait le lien vers ma page d'administration.

Quelle méthode est utilisé dans ce cas? Les coordonnées?
Merci d'avance...
Modifié par K3p' (06 Dec 2008 - 16:38)

K3p' a écrit :
Quelle méthode est utilisé dans ce cas?

Un remplacement d'image en JavaScript, avec éventuellement un preload de l'image état survolé au chargement de la page.

Au passage: ça m'a l'air horriblement inintuitif comme interface. C'est voulu?

Florent V. a écrit :

Un remplacement d'image en JavaScript, avec éventuellement un preload de l'image état survolé au chargement de la page.

Euh, pourquoi mettre du Javascript là dedans, CSS peut tout à fait gérer ça.

Quand tu parles du bouton graphique central c'est le genre de bouton rond ?
Pour ça je verrai bien de créer une image de fond contenant les états "normal" et "survolé" de ton image, l'un en dessous de l'autre. Ce qu'on appelle des CSS Sprites.

Tu peux ensuite créer ton lien en position:absolute et display:block en lui spécifiant une hauteur et une largeur égales à la taille du bouton (environ 65x65px à vue de nez) et en le placant par dessus ton bouton au pixel près avec top/left (n'oublie pas de rajouter un position:relative au parent)
Il ne te reste plus qu'à lui dire qu'en :hover il faut remonter l'image de fond de 65px pour afficher l'effet survolé.

Soit un truc du genre, à vue de nez, les dimensions ne sont sans doute pas correctes et je t'ai ajouté un lien "masqué" pour le cas où CSS soit désactivé (à noter que rien ne sera utilisable si css on / images off...)

<div class="menu">
	<a href="#" title="Adminnistration"><span>Administration</span></a>
</div>

.menu {
	position:relative;
	background:url(image de fond générale) top left no-repeat;
	height:84px;
	width:200px;
}
.menu a {
	position:absolute;
	width:65px;
	height:65px;
	top:0px;
	left:70px;
	background:url(image de fond du bouton contenant les deux états l'un en dessous de l'autre) top left no-repeat;
	overflow:hidden;
}
.menu a:hover {
	background-position:0px -65px;
}
.menu a span {
	margin-top:65px;
	display:block;
}

Tymlis a écrit :

Euh, pourquoi mettre du Javascript là dedans, CSS peut tout à fait gérer ça.

Dans certains cas on peut se retrouver avec du texte «hors cadre» ou en blanc sur fond blanc, donc invisible si les images sont désactivées.

Tymlis a écrit :
Euh, pourquoi mettre du Javascript là dedans, CSS peut tout à fait gérer ça.

Oui mais c'est pas fait pour.

CSS est censé mettre en forme des contenus, pas les cacher pour les remplacer par des images de fond qui pourraient aussi bien en pas s'afficher (image indisponible, utilisateur en bas débit qui désactive les images pour ne les afficher que ponctuellement, etc.). C'est un problème d'accessibilité régulièrement traité sur le forum (faire une recherche sur «remplacement d'image»).

Mais bon, ici le problème principal c'est qu'il n'est pas évident de savoir qu'on à affaire à des liens ou boutons, vu qu'on calque des codes provenant du monde physique (un objet manipulable) au lieu d'exploiter des conventions propres aux interfaces web. C'est avant tout un problème d'ergonomie assez criant, qu'il faudrait traiter en premier lieu. Et voir ensuite pour l'accessibilité.
Modifié par Florent V. (06 Dec 2008 - 20:19)

Je suis tout à fait conscient des limites de la méthode que j'énonce (et des autres de remplacement d'images), selon les différentes variations de css on/off, images on/off.

Mais je ne pense pas que Javascript soit plus indiqué pour ça. Si on laisse de coté le problème de la non-intuitivité de l'interface proposée, là on a clairement un problème de mise en page, d'interface à résoudre, et c'est à CSS de s'occuper de résoudre ce problème, ce n'est pas à mon sens le but de Javascript.

Imagine que Javascript soit désactivé avec la solution que tu proposes, l'interface en devient difficillement utilisable, il n'y a plus d'indication visuelle indiquant que ce gros rond est un lien.

A chaque problème ses outils pour les résoudre et ici c'est clairement un problème de mise en forme, reste à trouver une solution qui fonctionne correctement dans tous les cas de figures. Mais laissons Javascript hors de ça, ce n'est pas son travail.

En changeant le markup et en superposant l'image par dessus le texte on devrait laisser l'interface accessible dans tous les cas de figures et résoudre le problème.

Du genre :

<div class="menu">
	<a href="#" title="Administration">Administration<span></span></a>
</div>

.menu {
	[...]
	position:relative;
}
.menu a span {
	[...]
	background:url(CSS sprite) top left no-repeat;
	position:absolute;
	top:0px;
	left:0px;
}
.menu a:hover span {
	[...]
	background-position:0px -65px;
}

Bonsoir tout le monde,

Merci beaucoup pour vos nombreuses réponses!!

J'ai essayé ta première méthode Tymlis qui a plutôt bien fonctionné...
Dès que je trouve le temps j'essaie avec le nouveau code que tu viens de proposer.

Je préfère ne pas me servir de javascipt et simplifier l'intégration par l'intermédiaire de ma feuille CSS. Maintenant j'ai la preuve que c'est réalisable de cette façon.

Salut,

A partir du moment où le texte "administration" indiqué dans ton exemple, Tymlis, reste visible, il n'y a pas de mal à changer l'apparence du bouton en jouant sur la position du background donc cette méthode est valable.

En revanche, d'après l'interface, il ne semble pas y avoir ce texte et donc, le bouton rond fait office de contenu et devrait être placé directement dans le code (x)html avec un alt. Malheureusement, pour parvenir à ses fins, K3p' a certainement détourné la méthode proposée en omettant le texte "administration", ce qui rend le lien invisible en cas de désactivation des images, ou bien, en masquant le texte en jouant sur le text-indent par exemple, ce qui donne le même résultat.

Javascript est donc bien adapté à la résolution du problème.
En cas de désactivation de JS, le bouton ne changerait plus d'apparence mais un simple "title" placé sur le lien rendrait celui-ci plus explicite.
En cas de désactivation des images, l'attribut "alt" prendrait le relais.
Et puis, au delà de sa nécessité, JS permettrait, par exemple, de :

- modifier l'apparence du bouton de manière progressive (transition)
- modifier l'apparence et le contenu d'autres éléments de l'interface (un texte qui apparaitrait sur l'écran du téléphone, un jeu sur l'opacité de l'interface pour mettre le bouton en exergue au survol, etc...)

... bref, jouer là où CSS ne sait pas faire et où ce langage n'est pas vraiment adapté.
Modifié par koala64 (08 Dec 2008 - 10:56)

Hmm, hmm, je ne suis pas encore complétement convaincu

On veut ici accèder à l'administration en suivant un lien. Je ne mettrai pas ce lien en <img /> car l'image en elle-même, seule, n'apporte rien, elle ne prends son sens qu'au sein du reste de l'interface. Ce n'est pas pour moi un contenu et sa place n'est pas dans le markup html. C'est au contraire un élément graphique destiné à habiller le lien d'administration, sa place est donc en CSS.

La seconde méthode que je propose rends bel et bien le texte "Administration" invisible (quoiqu'il soit toujours en title), car remplacé par l'image du bouton. Mais ce cas de figure n'apparait qu'aux utilisateurs capable de comprendre cette interface (c'est à dire avec Images et CSS activés). Le menu est donc utilisable par ces gens là.

Si les images sont désactivés, alors notre lien n'est plus masqué par l'image, à condition de lui donner une couleur qui ressorte correctement sur un fond noir, il devient alors parfaitement visible.
Si CSS est désactivé au contraire, alors on se retrouve avec un simple lien administration, tout ce qu'il y a de plus simple. Et pas d'image supplémentaire puisqu'elle était affichée grâce à CSS.

Remarque bien que je ne masque le texte qu'aux utilisateurs ayant CSS et Images activés, il restera visible aux lecteurs écrans et à toutes les autres configurations.

La méthode Javascript se dégrade beaucoup moins bien si Javascript est désactivé que celle que je propose. Le title c'est sympa, mais il faut le savoir qu'il faut laisser son curseur sur ce bouton pour savoir à quoi il sert.

Les autres utilisations que tu cites de Javascript me semblent là par contre parfaitement correspondre à ce qu'on attends de ce langage... mais pas dans le cas présent
Modifié par Tymlis (10 Dec 2008 - 13:56)

Exact, je n'avais pas noté la subtilité du second exemple.

Dans ce cas, on peut compléter le survol par .menu a:focus span et .menu a:active span afin de rendre cette réactivité accessible au clavier.

... et puis, rien n'empêche de combiner les deux. J'ai tendance à trouver plus judicieux de se servir de Javascript pour tout ce qui est lié à l'aspect comportemental simplement parce que c'est le rôle de ce langage et que les possibilités sont plus nombreuses. En cas d'évolution, on a pris le bon chemin alors qu'en traitant le comportement avec CSS, on a pris un raccourci fort utile, j'en conviens, mais qui mène plus vite à une impasse. Si c'est pour un besoin personnel, sans contrainte particulière en terme de maintenance, pas de soucis; si c'est pour un client, mieux vaut prévoir ces éventuelles évolutions afin de ne pas remettre en cause le travail déjà effectué. A noter que lorsque CSS 3 sera correctement implémenté... un jour... cette différence sera plus infime vu qu'il y aura les transitions mais ce n'est pas pour autant qu'il faudrait dire que ce soit le rôle de CSS. Enfin, on n'en est pas encore là.
Modifié par koala64 (09 Dec 2008 - 11:34)