Tips: Utiliser une image comme <label> sous IE
Bonjour à tous,
Il est très commode d’utiliser des <label> dans un formulaire pour en faciliter son utilisation. Grâce à cette balise (trop peu utilisée à mon sens), il n’est plus nécessaire de cliquer exactement sur un radiobutton ou checkbox pour le sélectionner ou dans un input pour y placer le focus. Il suffit de placer la balise <label for="id_input"> autour d’un texte ou d’une image pour que lorsque l’on clique dessus, cela agisse sur l’élément de formulaire mentionné par l’attribut for du label.
Tout cela est merveilleux n’est-ce pas? Oui, sauf que… cela ne marche pas partout de la même manière. En effet, IE ne gére pas nativement cette écriture
-
<input id="oui" name="oui"><label for="oui"><img src="oui.png"</label>
Une image placée dans la balise <label> n’est pas « cliquable » (au sens, lié à mon élément de formulaire) sous IE alors qu’elle le sera sous les autres navigateurs.
Heureusement, d’autres que moi se sont cassés les dents sur ce problème avant moi et ont trouvés une solution qui marche très bien sans intervention majeure dans le code puisqu’il s’agit d’un petit script javascript qui se charge dans la partie de la page.
-
span class= »st0″>"MSIE""Windows""label""IMG""radio""checkbox""text""password""textarea"
Source: http://snook.ca/archives/javascript/using_images_as/
Evidemment, certains pesteront sur l’utilisation de javascript qui peut être bloqué par l’utilisateur. Mais selon moi, naviguer sur le web en desactivant l’utilisation de javascript c’est comme rouler en Ferrari mais éviter de passer au délà de la deuxième à cause des risques que cela comporte. (Et ce n’est pas MrMala qui me contredira…)