imagenes en un select

jgar · #1 (**permalink**) 02/09/2007, 09:18

es posible insertar imagenes dentro de un campo select de un formulario

he probado de hacer algo así

Código HTML:

<option value="valor"><img src="imagen.jpg"></option>

pero no me funciona

hay alguna manera?

minkweb · #2 (**permalink**) 02/09/2007, 14:42

oie, yo estoy en las mismas creo q no se puede, pero si existe una manera de hacer un efecto similar, se trata d usar un javascript, y al hacerle clic mostrar un div con scroll y que ese div tenga las opciones del select, pero obviamente dejaria de ser POST, pero eso no es problema es cuestion de pensar bien como pasar luego la variable

, a si descubres como hacerlo con un simple select avisame

Saludos

caricatos · #3 (**permalink**) 03/09/2007, 02:14

Hola:

No es posible poner imágenes en los options, y simularlo es posible, si, pero creo que la complejidad de su implementación en los formularios no lo hacen recomendable... supongo que podrían ponerse radios ocultos y sus "label" visibles... pero el sistema para desplegar las opciones y dejar visible la activa creo que tiene una complejidad innecesaria...

Saludos

derkenuke · #4 (**permalink**) 04/09/2007, 08:43

Hola:

He intentado implementarlo un poco. No es que sean imágenes grandes, son más bien iconitos. Pero de momento funciona (FF2). No he podido aumentar la implementación a IE porque no lo tengo disponible en este momento, pero creo que no será muy dificil.

Dejo el ejemplo. He utilizado CSS para los option, y se ponen directamente. Lamentablemente cuando un option está seleccionado, en el select no aparece la imagen, así que hay que colocarlo con javascript.

Es la primera vez que trabajo con el document.styleSheets para modificar las propiedades externas de las hojas de estilo, y poder separar el CSS del XHTML.

Bueno, la cosa queda así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
>
<html>
  <head>
    <style type="text/css">
    #elSel {
        padding-left: 25px;
        background-repeat: no-repeat;
        background-position: 3px 50&#37;;
    }
    #elSel option {
        padding-left: 25px;
        background-repeat: no-repeat;
        background-position: 3px 50%;
    }
    #opcion1 {
        background-image: url(http://www.forosdelweb.com/images/smilies/smile.gif);
    }
    #opcion2 {
        background-image: url(http://www.forosdelweb.com/fdwtheme/images/statusicon/user_online.gif);
    }
    #opcion3 {
        background-image: url(http://www.forosdelweb.com/fdwtheme/images/buttons/report.gif);
    }
    #opcion4 {
        background-image: url(http://www.forosdelweb.com/fdwtheme/images/buttons/reputation.gif);
    }
    #opcion5 {
        background-image: url(http://www.forosdelweb.com/images/smilies/dedosarriba.gif);
    }
    </style>
    <TITLE></TITLE>
  </head>
  <body>
    <select id="elSel">
    <option value="" id="opcion1">
        uno 
    </option>
    <option value="" id="opcion2">
        dos 
    </option>
    <option value="" id="opcion3">
        tres 
    </option>
    <option value="" id="opcion4">
        cuatro 
    </option>
    <option value="" id="opcion5">
        cinco 
    </option>
    </select>

<script type="text/javascript">

function getReglas() {
    return document.styleSheets[0].cssRules;
}

function getRegla(selector) {
    var reglas = getReglas();
    for(var i=0, l=reglas.length; i<l; i++) {
        if( (reglas[i].selectorText) && (reglas[i].selectorText==selector) ) {
            return reglas[i];
        }
    }
    return false;
}


var elSel = document.getElementById("elSel");
function actualizaImgSelect() {
    var i = elSel.selectedIndex + 1;
    var laRegla = getRegla("#opcion"+i);    
    if( laRegla ) {
        elSel.style.backgroundImage = laRegla.style.backgroundImage;
    }
}

window.onload = actualizaImgSelect;
elSel.onchange = actualizaImgSelect;




</script>
  </body>
</html>

A ver si a alguien le apetece hacer que funcione en IE.

Un saludo.