label para checkbox.

[KePitt2]

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 (&nbsp;) tal que así:

Código HTML:

<label for="idchk" style="font-size: 20px; background -image:url(xxx.gif)> &nbsp;&nbsp;&nbsp;&nbsp; </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!

[AlZuwaga]

No funciona en IE, pero si en FF.
Fijate si esto te sirve:

Código:

label {
background-image: url(xxx.gif);
background-repeat: no-repeat;
height: ##px; /* el alto de la imagen */
width: ##px; /* el ancho de la imagen */
display: block;
text-indent: -10000px;
float: left;
}


<label for="idchk">Le gusta?</label> <input type="checkbox" id="idchk" name="chk" />

Para que funcione en IE, aparentemente DEBE haber un texto dentro del label.

[KePitt2]

Iniciado por Al Zuwaga

Para que funcione en IE, aparentemente DEBE haber un texto dentro del label.

Pues básicamente es la solución a la que había llegado yo (en mi segundo párrafo de código), sólo que en lugar de introducir el texto "Le gusta?" introduzco el texto "&nbsp;" (espacio en blanco, que sí se reconoce como texto).

Sin embargo sigo con el mismo problema, no puedo hacer que la imagen de fondo tenga atributos como title o alt para que al pasar el ratón por encima me salga un "globo de texto", por lo que la solución a la que hemos llegado no es del todo efectiva en mi caso. Para conseguir ese efecto tendría que tirar de javascript, realizando las típicas capas que aparecen y desaparecen según donde esté situado el ratón (no me acuerdo del nombre), pero la finalidad es precisamente no usar js o hacerlo lo menos posible.

Muchas gracias por la ayuda.

[AlZuwaga]

Pero le podés poner el title (no alt*) al label!

<label for="idchk" title="Le gusta?">Le gusta?</label>


* es una confusión muy generalizada pensar que el atributo alt despliega el "cosito amarillo" (no recuerdo como se llama ). El alt (texto alternativo) es para las imágenes (para tener un texto alternativo cuando estas, por el motivo que sea, no se pueden mostrar). Creo que el único navegador que interpreta el alt mostrando ese "cosito amarillo" es IE.

[u_goldman]

Iniciado por Al Zuwaga

* es una confusión muy generalizada pensar que el atributo alt despliega el "cosito amarillo" (no recuerdo como se llama ).

Tooltip AZ, se llama Tootip, repeat after me: Tooltip

[AlZuwaga]

Por cierto...

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...

Al ser un elemento en linea, supongo que puede contener a cualquier otro elemento de la misma clase


EDIT: Tooltip!!! eso era!!! Gracias u_g ;)

[KePitt2]

Cierto es, no sabía que el elemento "label" podía tener atributo "title" (que por cierto, sabía que era el que necesitaba para sacar los "globos de texto", o como se llamen -yo tampoco me acuerdo :D -)...

Muchas gracias por la ayuda.

[Rafael]

Tengo un poco de flojera. Solo copié y pegué. Atributos para Label:

<!ATTLIST LABEL
%attrs; -- %coreattrs, %i18n, %events --
for IDREF #IMPLIED -- matches field ID value --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
>

Start tag: required, End tag: required

Attribute definitions

for = idref [CS]
This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.
Attributes defined elsewhere

id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information)
accesskey (access keys)
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Editado.

Y claro, me remuerde la conciencia, y resumo:

for, accesskey, id, class, lang, title, style, y eventos (onCositas)