Combos con imágenes

Artículo original de Linea De Código.

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 selecionar 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 imágen de fondo representativa. Para indicar la imágen de fondo de un elemento utilizamos el atributo background-image.

Veámos como quedaría definido:

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

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 50×50 pixels.

El otro atributo es background-repeat, al cual hemos dado un valor de no-repeat. Esto significa que solo se mostrará la imágen de fondo una vez. Y es que si usamos este estilo dentro de un área de 100×50 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:

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

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