Hola estoy intentando hacer lo siguiente en un formulario:
Código HTML:
<label for="idchk"> <img src="xxx.gif"> </label>
<input type="checkbox" id="idchk" name="chk">
Si en lugar de escribir "<img src="xxx.gif">" escribo un texto, al hacer click en él, el checkbox se selecciona/desselecciona como dios manda; pero por contra si lo que tengo es una imagen, al pulsar sobre ella no me hace absolutamente nada...
He solucionado esto haciendo el label de un tamaño igual a la imágen y de contenido cierto número de espacios en blanco ( ) tal que así:
Código HTML:
<label for="idchk" style="font-size: 20px; background -image:url(xxx.gif)> </label>
El problema es que aparte de ser una de las chapuzas más grandes que he diseñado en mi vida, no puedo hacer que el fondo de la imágen tenga los atributos alt y/o title, algo completamente indispensable y que por supuesto no quiero implementar por medio de capas ni js.
Lo raro es que al realizar el primer trozo de código consigo hacer que al pasar el mouse por encima de la imágen, el checkbox se "sombrea" como indicándonos que al pulsar sobre ella se marcará como si la pulsación se realizara sobre un "label" relleno de texto o incluso sobre el mismo checkbox, sin embargo al hacerlo los resultados son nulos...
Necesito ayuda para solucionar este tema porque la verdad es que me está costando lo suyo...
Y para completar el hilo, me gustaría saber qué elementos pueden ir incluidos entre la etiqueta "label", que para mí es todo un misterio...
Gracias y un saludo!