Foros del Web » Creando para Internet » HTML »

label para checkbox.

Estas en el tema de label para checkbox. en el foro de HTML en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 13/12/2006, 15:52
 
Fecha de Ingreso: noviembre-2006
Mensajes: 30
Antigüedad: 11 años, 1 mes
Puntos: 1
label para checkbox.

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!

Última edición por KePitt2; 13/12/2006 a las 16:01
  #2 (permalink)  
Antiguo 13/12/2006, 16:58
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: label para checkbox.

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.
__________________
...___...
  #3 (permalink)  
Antiguo 13/12/2006, 17:16
 
Fecha de Ingreso: noviembre-2006
Mensajes: 30
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: label para checkbox.

Cita:
Iniciado por Al Zuwaga Ver Mensaje
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.
  #4 (permalink)  
Antiguo 13/12/2006, 18:04
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: label para checkbox.

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.
__________________
...___...
  #5 (permalink)  
Antiguo 13/12/2006, 18:12
Avatar de u_goldman
Moderador
 
Fecha de Ingreso: enero-2002
Mensajes: 8.031
Antigüedad: 15 años, 11 meses
Puntos: 98
Re: label para checkbox.

Cita:
Iniciado por Al Zuwaga Ver Mensaje
* 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
__________________
"El hombre que ha empezado a vivir seriamente por dentro, empieza a vivir más sencillamente por fuera."
-- Ernest Hemingway
  #6 (permalink)  
Antiguo 13/12/2006, 18:14
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: label para checkbox.

Por cierto...

Cita:
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 ;)
__________________
...___...
  #7 (permalink)  
Antiguo 14/12/2006, 09:06
 
Fecha de Ingreso: noviembre-2006
Mensajes: 30
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: label para checkbox.

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.
  #8 (permalink)  
Antiguo 20/12/2006, 02:19
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Re: label para checkbox.

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

Cita:
<!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)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:01.