Images cliquables [Résolu]

Bonjour à tous,

Je cherche à réaliser un formulaire dans lequel l'utilisateur peut "choisir" une image parmi un liste.

Je voudrais en fait que ces images se comportent comme un liste de boutons radio.

J'ai cherché sur le net mais je ne sais pas comment ce type de formulaire s'appelle, donc je n'ai rien trouvé.

Merci d'avance pour votre aide.

Oxy.

PS: si la réponse est évidente et que j'ai pas assez cherché, mp puis suppression du post !
Modifié par Oxycrest (05 Jun 2008 - 15:26)

Bonjour,

<input type="radio" name="test" id="test1" />
<label for="test1"><img src="test1.png" alt="choix numéro 1" /></label>
<input type="radio" name="test" id="test2" />
<label for="test2"><img src="test2.png" alt="choix numéro 2" /></label>
<input type="radio" name="test" id="test3" />
<label for="test3"><img src="test3.png" alt="choix numéro 3" /></label>

Et voilà pour le code de base.

Ensuite, on peut imaginer une surcouche Javascript qui:
- appliquerait un style à chaque image lors du clic;
- cacherait les boutons radio avec un visibility: hidden.

N'ayant jamais tenté cette solution, je ne sais pas si elle pose des problèmes quelconques, par exemple des problèmes d'accessibilité. À priori ça devrait être correct, mais il faudrait voir le comportement exact des navigateurs en présence de boutons radio en visibility: hidden;.

Simple mais il fallait y penser !

L'image en "label" et le bouton caché, très astucieux.

Je teste cela demain et vous tiens au courant du résultat.

Merci encore !

J'ai testé tout cela, ça fonctionne à merveille, exactement ce que je voulais.

http://img221.imageshack.us/img221/9450/sanstitre1copiefq8.jpg


Pour les boutons radio j'ai utilisé le css :

.radio{
display:none;
}

Mes images ont un padding de 3px, arrière-plan transparent.
J'ai utilisé la librairie jquery pour changer le "background-color" au clic sur une image.
(je passe toutes les images au transparent puis celle cliquée en orange)

		
$(".Photo-imgList").click(function() {
	 $(".Photo-imgList").css("background-color","");
	 $(this).css("background-color","#F1A301");
	});

Pour récupérer les données ça fonctionne comme avec un bouton radio classique.

Merci encore Florent V. tu m'as beaucoup dépanné.

En espérant que cela serve à d'autre

Bonjour

Est-ce qu'au clavier (touche TAB) ça marche aussi ?

Bonjour,

Apparemment non.
Je ne sais pas si ça change quelque chose, mais le code généré :

<input type="radio" name="ListPhoto" id="Image_A.JPG"  value="Image_A.JPG"/>
	<label for="Image_A.JPG" >
<img  src="../images/element/Image_A.JPG"/>
</label>

<input type="radio" name="ListPhoto" id="Image_B"  value="Image_B"/>
<label for="Image_B" >
	<img  src="../images/element/Image_B" />
</label>

<input type="radio" name="ListPhoto" id="Image_C.JPG"  value="Image_C.JPG"/>
<label for="Image_C.JPG" >
	<img  src="../images/element/Image_C.JPG" />
</label>

<input type="radio" name="ListPhoto" id="Image_D.JPG"  value="Image_D.JPG"/>
<label for="Image_D.JPG" >
	<img  src="../images/element/Image_D.JPG" />
</label>

... est imbriqué dans un div lui même dans un fieldset.

Je suppose que ta question concerne le domaine de l'accessibilité ? Que dois-je faire pour me mettre aux norme ?

PS: le code présenté n'est pas cohérent avec les bouts de classes montrés avant, c'est normal j'ai nettoyé.

Oxycrest a écrit :
Pour les boutons radio j'ai utilisé le css :

.radio{
display:none;
}

Pour le coup l'utilisation du clavier ne devrait pas être possible, et cette solution ne sera pas accessible à un lecteur d'écran. Je m'étonne même que l'envoi du formulaire permette de récupérer les données, les boutons radio étant supprimés de la page (display: none) au lieu d'être cachés. De plus, en l'absence de Javascript tes boutons radio n'apparaissent pas, donc c'est pas terrible. C'est pour cela que je disais que masquer les boutons radio devait se faire en Javascript (sous-entendu: pas en CSS!).

Bref, ce serait une solution à retravailler en partie pour qu'elle soit correcte.

Oxycrest a écrit :
Que dois-je faire pour me mettre aux norme ?

Se former.

Javascript non intrusif et formulaire utilisable sans Javascript, pour commencer. Texte alternatif sur les images, ensuite (mon exemple en comportait, mais le tien en semble dépourvu). Peut-être l'utilisation de la fonction hide() de JQuery (mais je ne sais pas ce qu'elle donne exactement).

Florent V. a écrit :

Pour le coup l'utilisation du clavier ne devrait pas être possible, et cette solution ne sera pas accessible à un lecteur d'écran. Je m'étonne même que l'envoi du formulaire permette de récupérer les données, les boutons radio étant supprimés de la page (display: none) au lieu d'être cachés.

Euuuh, le nom de la propriété, c'est quand même display. Le css reste de la présentation, et uniquement de la présentation, et ne supprime pas les éléments de l'arbre du document, mais de sa restitution à l'utilisateur. Qu'une image ne soit pas téléchargée si elle est en display: none; c'est une chose, ça économise de la bande passante. Mais elle existe tout de même dans l'arbre du document.
Modifié par Lanza (03 Jun 2008 - 14:39)

Hum, je ne vais pas tous vous citer.. donc :

- le display:none ne supprime pas les boutons radio de la page, ils sont dans la portion de code que j'ai donnée et je récupère les données sans problème, ils sont juste masqués.

- texte alternatif sur les images : j'ai nettoyé le code, mais ils y sont.

Pour le javascript non intrusif, je sais ce que je vais faire.
Laisser tout visible et au chargement du dom cacher les boutons radio avec jquery

Qu'en penses tu ?

Lanza a écrit :
Mais elle existe tout de même dans l'arbre du document.

Ah. Je pensais que les éléments en display: none étaient retirés du DOM. Autant pour moi.

Ben non, parce que dans ce cas, tu ne pourrais pas (par exemple) imprimer une page qui a une feuille de style différente de celle à l'écran. Le DOM doit rester intact.

Celà dit, il est vrai que dans le cas d'un formulaire, c'est maladroit. Personnellement je remplacerais les boutons radios par un input hidden du même nom via javascript.

Lanza a écrit :
Qu'une image ne soit pas téléchargée si elle est en display: none; c'est une chose, ça économise de la bande passante.

Sûr de toi, Lanza ? Je pencherais plutôt pour le fait qu'elle est bel et bien chargée mais juste non-montrée... sinon, si par un appel JS (genre getElementById('image').display=block) elle apparait illico, ça voudrait dire qu'on la charge sans recharger la page... et du coup ça s'appellerait Ajax

Lanza a écrit :


Euuuh, le nom de la propriété, c'est quand même display. Le css reste de la présentation, et uniquement de la présentation, et ne supprime pas les éléments de l'arbre du document, mais de sa restitution à l'utilisateur. Qu'une image ne soit pas téléchargée si elle est en display: none; c'est une chose, ça économise de la bande passante. Mais elle existe tout de même dans l'arbre du document.

Elle existe dans l'arbre du document, mais le navigateur pour le media spécifié aura pour ordre de ne pas la faire apparaître dans sa méthode de présentation du document. Sous-entendu : elle ne peut pas être modifié par l'agent utilisateur sans passer par un script, ce qui n'est pas terrible, vu que 6-12% des utilisateurs du Web n'utilisent pas JS (ou autre).

Tout cela soulève certaines questions intéressantes, toutefois sachez que c'est pour un outil en interne et que les postes clients seront configurés avec javascript actif.

Sinon grosse page toute blanche "javascript est désactivé".

Hello,

Je ne vois pas trop en quoi le fait de cacher les boutons radio en JavaScript va améliorer l'accessibilité... Il n'y a pas de rapport entre navigation au clavier et activation de JavaScript.

A mon avis, pour que l'utilisation soit possible au clavier, il ne faut pas cacher les boutons radio avec "display: none;" mais avec un positionnement hors de l'écran comme "position: absolute; left: 0; top: -999px; width: 1px; height: 1px; overflow: hidden;".

Et tant qu'à faire, le changement de style des images peut se faire plutôt sur des événements liés aux changement d'état des boutons radio, ce qui permettra que les utilisateurs du clavier puissent en profiter.
Modifié par Julien Royer (05 Jun 2008 - 13:55)

Et bien, on a fait du chemin depuis le début.

Julien, je crois que tu as finis par résoudre le problème, ta solution fonctionne très bien !

Alors voilà à quoi ressemble le code :

La feuille de style :

.radio-ListPhoto{
position: absolute;
left: 0;
top: -999px;
width: 1px;
height: 1px;
overflow: hidden;
}

Le code généré pour une image

<input name="radio-ListPhoto" id="xMODULO_DSCF1555.JPG" 
class="radio-ListPhoto" value="MODULO_DSCF1555.JPG" type="radio">

<label for="xMODULO_DSCF1555.JPG" class="label-ListePhoto">

<img class="img-ListPhoto" src="../images/element/MODULO_DSCF1555.JPG" 
alt="xMODULO_DSCF1555.JPG" id="MODULO_DSCF1555.JPG">

</label>

Et le petit bout de javascript, toujours en utilisant jQuery

<script type="text/javascript">
	$(document).ready(function() {

		$(".radio-ListPhoto").change(function() {
			$(".img-ListPhoto").css("background-color","");
			$(document.getElementById(this.value)).css("background-color","#F1A301");
		});

	});
</script>

Je crois que le problème est résolu !



EDIT: arf, j'ai parlé trop vite !

Ca fonctionne parfaitement... sur firefox.

Sur ie (6 et plus) lorsque je me déplace avec les flèches sur mes images, il y a un décalage.
En fait, l'image sélectionnée n'a pas le style, celle d'avant oui.
c'est l'évennement 'change' qui doit déconner... je vais voir ça.

EDIT2: Pire encore, sous ie on ne peut QUE naviguer avec les flèches, le clic sur image n'a plus d'impact.
l'évennement 'focus' solutionne le problème de décalage, malheureusement il va aussi falloir que je détecte le clic sur image pour activer le bouton radio et changer le style... alalala...
Modifié par Oxycrest (05 Jun 2008 - 14:45)

Re,

En fait, une solution sans doute moins problèmatique serait la suivante :

- Garder la code HTML courant (peut-être juste en évitant les "." dans les ids).
- Au chargement de la page, en JS : cacher les boutons radio ($(...).hide()) ; remplacer les labels par des liens qui lors du click changent l'état du bouton radio correspondant ainsi que le fond de l'image (ce qui d'ailleurs serait peut-être plus propre en passant par une classe).

J'ai gardé la première solution, avec le style sur les boutons radio hors de page, pour le fond de l'image je suis passé avec des classes, suivant ton conseil.

voici donc le script

$(".radio-ListPhoto").focus(function() {
	$(".img-ListPhoto-Selected").attr('class','img-ListPhoto');
		$(document.getElementById(this.value)).attr('class','img-ListPhoto-Selected');
		return false;
	});
	$(".img-ListPhoto").click(function() {
		$(".img-ListPhoto-Selected").attr('class','img-ListPhoto');
		$(this).attr('class','img-ListPhoto-Selected');
		var radio = $(this).attr("alt");
		document.getElementById(radio).checked = true;
		return false;
	});
});

Fonctionne avec ie 6, 7 et firefox 2.

Merci à tous pour votre aide.

Arsene a écrit :

Sûr de toi, Lanza ? Je pencherais plutôt pour le fait qu'elle est bel et bien chargée mais juste non-montrée...

Oui, je crois aussi.