PDA

Ver la Versión Completa : Select con imagenes será posible

hvelascos
25-01-2007, 00:55:18
Hola foro

:pEstaba 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:rolleyes: 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
25-01-2007, 01:22:46
Se pueden poner imagenes, por ejemplo:


<!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 :D

// Saludos
roman
25-01-2007, 02:53:36
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í (http://romansg.net/ejemplos/combo_imagenes/combo.html).

// Saludos
hvelascos
25-01-2007, 17:15:39
:D 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!!!:D
:( 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
01-02-2007, 14:47:28
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.
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"