Desplegable seleccionar con imágenes

Quería crear una selección desplegable que tenga imágenes en lugar de texto como las opciones. He hecho algunas búsquedas en Google y buscando aquí en Stack Overflow, y la respuesta generalmente dada es usar el combobox de jQuery .

El problema con esta solución, me parece, es que debe proporcionar texto. Parece que las imágenes son solo icons que acompañan a ese texto a la izquierda. Corrígeme si estoy equivocado, pero esta solución no cubriría lo que estoy tratando de hacer, que es reemplazar completamente el texto con imágenes.

Algunos antecedentes sobre lo que estoy tratando de hacer– Estoy tratando de crear un menú desplegable para que los usuarios seleccionen el grosor de línea en una aplicación de pintura / garabatos en línea. Las imágenes serían líneas de diferente espesor, tipo de mspaint.

Verifique este ejemplo … todo se ha hecho fácilmente http://jsfiddle.net/GHzfD/

EDITAR : Actualizado / en funcionamiento a partir de 2013, 02 de julio: jsfiddle.net/GHzfD/357

 #webmenu{ width:340px; }  $("body select").msDropDown(); 

¡Ni siquiera necesitas javascript para hacer esto!

Espero que esto te haya intrigado así que aquí va. Primero, la estructura html:

 
...

Whaaat? ¿Botones de radio? Correcto. Los haremos parecer como una lista desplegable con imágenes, ¡porque eso es lo que buscas! El truco está en saber que cuando las tags están vinculadas correctamente a las entradas (ese atributo “para” y el ID del elemento objective), la entrada se activará implícitamente; haga clic en una etiqueta = haga clic en un botón de radio. Aquí viene viene css ligeramente abreviado con comentarios en línea:

 #image-dropdown { /*style the "box" in its minimzed state*/ border:1px solid black; width:200px; height:50px; overflow:hidden; /*animate the dropdown collapsing*/ transition: height 0.1s; } #image-dropdown:hover { /*when expanded, the dropdown will get native means of scrolling*/ height:200px; overflow-y:scroll; /*animate the dropdown expanding*/ transition: height 0.5s; } #image-dropdown input { /*hide the nasty default radio buttons!*/ position:absolute;top:0;left:0;opacity:0; } #image-dropdown label { /*style the labels to look like dropdown options*/ display:none; margin:2px; height:46px; opacity:0.2; background:url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;} #image-dropdown:hover label{ /*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/ display:block; } #image-dropdown input:checked + label { /*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque and visible even in the collapsed menu*/ opacity:1 !important; display:block; } 

Ejemplo completo aquí: http://jsfiddle.net/NDCSR/1/

NB1: probablemente necesite usarlo con la posición: absoluta dentro de un contenedor con posición: relativo + alto índice Z.

NB2: cuando agregue más fondos para estilos de línea individuales, considere tener los selectores basados ​​en el atributo “para” de la etiqueta, así:

 label[for=linestyle2] {background-image:url(...);} 

Parece que un menú html sencillo sería más simple. Utilice los atributos de datos html5 para los valores o el método que quiera almacenarlos y css para manejar las imágenes como fondos o ponerlas en el html mismo.

Editar: si se ve forzado a realizar una conversión desde una selección existente de la que no puede deshacerse, también existen algunos buenos complementos para modificar una selección a html. Wijmo y Chosen son una pareja que me viene a la mente

Si lo piensas, el concepto detrás de un menú desplegable seleccionar es bastante simple. Por lo que estás tratando de lograr, un simple

    servirá.

      

    Lo estilo con css y luego algo simple de jQuery servirá. No he intentado esto aunque:

     $('#menu ul li').click(function(){ var $a = $(this).find('a'); $(this).parents('#menu').children('li a').replaceWith($a). }); 

    JAVASCRIPT PLAIN:

    DEMO: http://codepen.io/tazotodua/pen/orhdp

     var shownnn = "yes"; var dropd = document.getElementById("image-dropdown"); function showww() { dropd.style.height = "auto"; dropd.style.overflow = "y-scroll"; } function hideee() { dropd.style.height = "30px"; dropd.style.overflow = "hidden"; } //dropd.addEventListener('mouseover', showOrHide, false); //dropd.addEventListener('click',showOrHide , false); function myfuunc(imgParent) { hideee(); var mainDIVV = document.getElementById("image-dropdown"); imgParent.parentNode.removeChild(imgParent); mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]); } 
     #image-dropdown { display: inline-block; border: 1px solid; } #image-dropdown { height: 30px; overflow: hidden; } /*#image-dropdown:hover {} */ #image-dropdown .img_holder { cursor: pointer; } #image-dropdown img.flagimgs { height: 30px; } #image-dropdown span.iTEXT { position: relative; top: -8px; } 
      
    First
    Second
    Third
    Fourth

    Use el cuadro combinado y agregue el siguiente css .ddTitleText{ display : none; } .ddTitleText{ display : none; }

    No más texto, solo imágenes.

    Estoy un poco retrasado en esto, pero puede hacerlo usando un menú desplegable de arranque simple y luego haga su código en el evento de cambio seleccionado en cualquier idioma o marco. (Esta es solo una solución muy básica para otras personas como yo que recién están empezando y buscando una solución para un proyecto simple y pequeño).

      

    Intenté varias selecciones personalizadas basadas en jquery con imágenes, pero ninguna funcionó en diseños receptivos. Finalmente me encontré con Bootstrap-Select. Después de algunas modificaciones, pude producir este código.

    github repo enlace aquí

    github repo enlace aquí