Select con imagenes será posible

hvelascos · #1 25-01-2007

Hola foro

Estaba navegando por la internet para ver si encontraba una libreria o algo asi para poder hacer un select que es sus options se puedan agregar imagenes (en php o javascript), pero no tuve suerte

, mmm

habrá la posiblilidad de hacer este combo con imagenes, si alguien conoce algo sobre el tema, o de plano no se puede, porfavor no duden en comunicarmelo.

gracias.

saludos.

roman · #2 25-01-2007

Se pueden poner imagenes, por ejemplo:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title> Combo </title>
<style type='text/css'>
select#idioma option
{
    background-repeat: no-repeat;
    padding-left: 24px;
}

option#esp
{
    background-image: url(mx.png);
}

option#ing
{
    background-image: url(gb.png);
}

option#fra
{
    background-image: url(fr.png);
}
</style>
</head>

<body>
<select id='idioma'>
<option value='1' id='esp'>Español
<option value='2' id='ing'>Inglés
<option value='3' id='fra'>Francés
</select>
</body>
</html>

Es un combo (select) con tres elementos: Español, Inglés y Francés, y cada uno muestra una imagen: mx.png, gb.png y fr.png respectivamente.

La mala noticia*: las imágenes se ven en FireFox pero no en IE (ignoro lo que pasa en otros navegadores) y no sé si exista una forma de hacerlo para esa cosa.

* Mala noticia para quienes aún usan IE, a los demás nos tiene sin cuidado

// Saludos

roman · #3 25-01-2007

El combo anterior muestra las imágenes sólo cuando se abre la lista pero una vez que se selecciona un elemento, no se ve la imagen. Esto es así porque hemos puesto imágenes sólo en los <option> pero no el <select> en sí.

Podemos hacerlo, pero necesitamos además un poco de javascript para cambiar la imagen del <select> cuando cambiamos de ítem. Dejo el adjunto con el ejemplo y las imágenes. También puedes verlo en funcionamiento aquí.

// Saludos

hvelascos · #4 25-01-2007

que buenisima solución!!, gracias roman, nunca me paso por la mente usar estilos.
No se como le hacen que todo lo pueden solucionar,

este foro vale su peso en oro!!!

lo malo que no funciona en ie, pero naah! nunca lo uso a mi me da igual,
estaré buscando haber si logro hacer funcionar en ie, si tengo suerte, aquí lo publicar para que este hilo quede más completo.

gracias de nuevo y saludos

Deiv · #5 01-02-2007

Roman,
Me interesó tu ejemplo e hice la misma pregunta a un Foro Ruso para IE, y después de muchas sugerencias un amigo me envió otro ejemplo, este a diferencia del tuyo que los gráficos no se mostraban en IE pero si en FF, es muy parecido, incluye gráficos y lo mas importante trabaja: en IE y en FF, o sea en ambos.

Cita:

Empezado por Roman

La mala noticia*: las imágenes se ven en FireFox pero no en IE (ignoro lo que pasa en otros navegadores) y no sé si exista una forma de hacerlo para esa cosa

Amigos, estoy en mis primeros pasos de aprender a Construir una Pag.Web y así mismo en ambientarme con el lenguaje de JavaScript y CSS, por lo cual sugiero a Ustedes quienes pudieran observar el ejemplo ADECUARLO al ejemplo de Roman (al COMBO), sería magnífico para que trabaje en IE, ese Combo.
¿Se puede?

Deiv

Ps.- El texto "Логин" significa "Login"

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Es posible con SQL sumar algunos registros de un SELECT?	nefy	SQL	4	10-10-2007 23:32:24
Problema conuna consulta select...not in (select ...)	VRO	Firebird e Interbase	2	11-08-2005 08:56:35
5 select de 5 tablas diferentes en un select solo	sakuragi	SQL	6	15-06-2005 18:57:06
Select anidado: Select from (select....)	Malon	SQL	2	14-10-2004 14:01:24
Select anidado ( Select from select )	Malon	Firebird e Interbase	1	05-10-2004 04:14:38