Advertising:
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