Foros del Web » Creando para Internet » HTML »

imagenes en un select

Estas en el tema de imagenes en un select en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/09/2007, 10:18
 
Fecha de Ingreso: septiembre-2006
Mensajes: 81
Antigüedad: 11 años, 2 meses
Puntos: 0
imagenes en un select

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?
  #2 (permalink)  
Antiguo 02/09/2007, 15:42
Avatar de minkweb  
Fecha de Ingreso: septiembre-2005
Mensajes: 443
Antigüedad: 12 años, 3 meses
Puntos: 14
Re: imagenes en un select

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
  #3 (permalink)  
Antiguo 03/09/2007, 03:14
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: imagenes en un select

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 04/09/2007, 09:43
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Re: imagenes en un select

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-left25px;
        
background-repeatno-repeat;
        
background-position3px 50&#37;;
    
}
    
#elSel option {
        
padding-left25px;
        
background-repeatno-repeat;
        
background-position3px 50%;
    }
    
#opcion1 {
        
background-imageurl(http://www.forosdelweb.com/images/smilies/smile.gif);
    
}
    
#opcion2 {
        
background-imageurl(http://www.forosdelweb.com/fdwtheme/images/statusicon/user_online.gif);
    
}
    
#opcion3 {
        
background-imageurl(http://www.forosdelweb.com/fdwtheme/images/buttons/report.gif);
    
}
    
#opcion4 {
        
background-imageurl(http://www.forosdelweb.com/fdwtheme/images/buttons/reputation.gif);
    
}
    
#opcion5 {
        
background-imageurl(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=0l=reglas.lengthi<li++) {
        if( (
reglas[i].selectorText) && (reglas[i].selectorText==selector) ) {
            return 
reglas[i];
        }
    }
    return 
false;
}


var 
elSel document.getElementById("elSel");
function 
actualizaImgSelect() {
    var 
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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:32.