Foros del Web » Creando para Internet » HTML »

Select con imágenes

Estas en el tema de Select con imágenes en el foro de HTML en Foros del Web. ¿Se pueden poner imágenes a las options de los selects?...
  #1 (permalink)  
Antiguo 23/11/2006, 15:53
 
Fecha de Ingreso: octubre-2005
Mensajes: 42
Antigüedad: 12 años, 1 mes
Puntos: 0
Select con imágenes

¿Se pueden poner imágenes a las options de los selects?
  #2 (permalink)  
Antiguo 24/11/2006, 01:59
Avatar de urgido  
Fecha de Ingreso: febrero-2005
Mensajes: 2.351
Antigüedad: 12 años, 9 meses
Puntos: 25
no, no se puede. Saludos
__________________
Hospedaje Web al mejor costo!
  #3 (permalink)  
Antiguo 04/12/2006, 07:54
Avatar de lineadecodigo  
Fecha de Ingreso: diciembre-2006
Ubicación: España
Mensajes: 27
Antigüedad: 11 años
Puntos: 0
urgido, no estoy totalmente de acuerdo contigo. Yo diría que de forma general y estandar no se puede.

Si bien, si pensamos que los visitantes de nuestra web van a utilizar alguno de los navegadores de Mozilla (como el FireFox), quizas les podamos dar algo.

La idea es definir estilos CSS como una imagen de fondo (background-image). Imagen que querramos mostrar en el combo.

<style type="text/css">
<!--
.circulo {
background-image: url(circulo.jpg);
height: 50px;
width: 50px;
background-repeat: no-repeat;
}
.triangulo{
background-image: url(triangulo.jpg);
height: 50px;
width: 50px;
background-repeat: no-repeat;
}
.cuadrado{
background-image: url(cuadrado.jpg);
height: 50px;
width: 50px;
background-repeat: no-repeat;
}
-->
</style>

Ahora solo tenemos que hacer un combo y asignar a los option las clases definidas como estilos. De la siguiente manera:

<select>
<option class="cuadrado">Cuadrado</option>
<option class="circulo">Circulo</option>
<option class="triangulo">Triangulo</option>
</select>


Y ya está. Nuestro combo con imágenes.

Salu2.
Línea de Código.
  #4 (permalink)  
Antiguo 04/12/2006, 12:11
Avatar de urgido  
Fecha de Ingreso: febrero-2005
Mensajes: 2.351
Antigüedad: 12 años, 9 meses
Puntos: 25
el se refiere a las opciones... no a un adorno. Saludos
__________________
Hospedaje Web al mejor costo!
  #5 (permalink)  
Antiguo 04/12/2006, 16:25
Avatar de lineadecodigo  
Fecha de Ingreso: diciembre-2006
Ubicación: España
Mensajes: 27
Antigüedad: 11 años
Puntos: 0
Que entiendes por adorno???
El ejemplo que he puesto pone las imágenes en las opciones del combo.

Salu2.
Línea de Código.
  #6 (permalink)  
Antiguo 05/12/2006, 08:25
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
Mientras las imágenes sean meramente decorativas, la solución de lineadecodigo (que desconocía) me parece buena. Ahora, si la imagen es contenido, entonces estarías haciendo algo poco accesible. Me parece.

Saludos
__________________
...___...
  #7 (permalink)  
Antiguo 05/12/2006, 09:50
Avatar de lineadecodigo  
Fecha de Ingreso: diciembre-2006
Ubicación: España
Mensajes: 27
Antigüedad: 11 años
Puntos: 0
Hay que tener en cuenta que para ser accesible siempre hay que proporcionar un texto alternativo a la imágen. Estemos poniendo la imágen donde la estemos poniendo.

La imágen debería de hacer más usable la página (una imágen vale más que mil palabras). Hacer entender el concepto. Pero nunca sustituir la funcionalidad. Que la daremos con el texto.

Salu2.

Última edición por tunait; 06/12/2006 a las 04:51 Razón: Por favor, no firmen dentro de los mensajes
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 09:30.