Combos con imágenes

05/Dic/2006 HTML , , , , 4 Comentarios

Mientras que esperamos a que XForms se convierta en el estándar soportado por los navegadores para el desarrollo de formularios (espero que XHTML 2.0 lo de el impulso necesario), nos vemos obligados a realizar verdaderas virguerías con los formularios de HTML 4.01.

En este caso lo que queremos es que nuestros combos de selección nos aparezcan con imágenes y que pueda seleccionar una de ellas. ¿Es esto posible?

La respuesta a esta pregunta es difícil. Podríamos decir que imposible no es. Pero que el soporte que se da desde los navegadores a este caso es mínimo. Para que nos hagamos una idea, solo funciona con los motores Mozilla (FireFox y compañia).

La idea es la siguiente. En primer lugar, utilizando hojas de estilo CSS definiremos tres elementos cuadrado,circulo y triangulo. Estos tres elementos tendrán una imagen de fondo representativa. Para indicar la imágen de fondo de un elemento utilizamos el atributo background-image.

Veamos como quedaría definido:

  1. .circulo {
  2. background-image: url(circulo.jpg);
  3. height: 50px;
  4. width: 50px;
  5. background-repeat: no-repeat;
  6. }
  7. .triangulo{
  8. background-image: url(triangulo.jpg);
  9. height: 50px;
  10. width: 50px;
  11. background-repeat: no-repeat;
  12. }
  13. .cuadrado{
  14. background-image: url(cuadrado.jpg);
  15. height: 50px;
  16. width: 50px;
  17. background-repeat: no-repeat;
  18. }

Hay que indicar que hemos utilizado otros atributos. El primero es el alto y ancho (height y width respectivamente). La idea es tener imágenes uniformes de 50x50 pixels.

El otro atributo es background-repeat, al cual hemos dado un valor de no-repeat. Esto significa que solo se mostrará la imagen de fondo una vez. Y es que si usamos este estilo dentro de un área de 100x50 veremos que, por defecto nos aparece duplicada la imagen.

Ahora solo nos quedará definir el combo y asignar los estilos necesarios en cada opción. De la siguiente forma:

  1. <option class="cuadrado">Cuadrado</option>
  2. <option class="circulo">Circulo</option>
  3. <option class="triangulo">Triangulo</option>
  4. </select>

Y ya está. Ya tenemos nuestro combo con imágenes. El cual, en FireFox, nos quedará de la siguiente manera:

Combo con imagenes

Vídeos sobre HTML


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Combos con imágenes”

Víctor Cuervo

anonimo

no funciona con internet explorer

Víctor Cuervo

Víctor Cuervo

No, la última prueba que hice fue con Internet Explorer 11 y seguía sin funcionar. 🙁

Víctor Cuervo

lineadecodigo

Lucy, por desgracia no he encontrado ninguna forma de hacerlo en Internet Explorer. Si alguien lo conoce, su ayuda será de mucha utilidad.

Víctor Cuervo

Lucy

¿Cómo hacerlo para visualizarlo en IExplorer?

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*