2

Quiero agregar mas de 255 imágenes en un menú desplegable, hice esto pero no muestra la imagen, si alguien me ayuda lo agradezco.

<table>
    <tr>
        <td>Modificar Porcentaje de dificultad:</td>
        <td>
            <select name="percent">
                <option value="100">
                    <a class="back" href="images/anillo.png"></a>
                </option>
                <option value="100">
                    <a class="back" href="images/utileria.png"></a>
                </option>
                <option value="100">
                    <a class="back" href="images/joyeria.jpg"></a>
                </option>
        </td>
    </tr>
</table>
4
  • 1
    Esto te puede servir: stackoverflow.com/questions/2965971/… Commented el 16 dic. 2016 a las 12:33
  • 2
    @sioesi - no tienes que borrar nada... ni me di cuenta que hubo respuestas... se podría contestar y hacer referencia... totalmente legitimo... Commented el 16 dic. 2016 a las 12:40
  • 1
    @aldanux actualice mi pregunta, hice referencia a la respuesta en ingles y explique un poco problema
    – sioesi
    Commented el 16 dic. 2016 a las 12:42
  • Que yo sepa, no se pueden poner imágenes en los option (al menos no una solución que te vaya a funcionar en todos los navegadores). De todos modos, con el código que tienes no se mostraría imagen nunca, porque directamente no hay imagen (hay un enlace, no una imagen). Seguramente vas a tener que usar JS o reescribir la select para simularla usando HTML+CSS.
    – Alvaro Montoro
    Commented el 16 dic. 2016 a las 13:08

2 respuestas 2

4

Como te ponía (y te ponen) en otros comentarios y respuestas, para realizar lo que quieres vas a necesitar cambiar tu HTML o usar algún tipo de plugin de JavaScript/jQuery. Ya tienes una solución con JavaScript, yo te voy a poner una alternativa usando sólo HTML y CSS, sin ningún código en JavaScript.

La idea es tener una serie de botones de radio y labels (que activarán/desactivarán esos botones). Y si quieres que se permita selección múltiple, podrías usar checkboxes en lugar de radio.

Aquí dejo un ejemplo de cómo podría hacerse:

.select-sim {
  width:200px;
  height:22px;
  line-height:22px;
  vertical-align:middle;
  position:relative;
  background:white;
  border:1px solid #ccc;
  overflow:hidden;
}

.select-sim::after {
  content:"▼";
  font-size:0.5em;
  font-family:arial;
  position:absolute;
  top:50%;
  right:5px;
  transform:translate(0, -50%);
}

.select-sim:hover::after {
  content:"";
}

.select-sim:hover {
  overflow:visible;
}

.select-sim:hover .options .option label {
  display:inline-block;
}

.select-sim:hover .options {
  background:white;
  border:1px solid #ccc;
  position:absolute;
  top:-1px;
  left:-1px;
  width:100%;
  height:88px;
  overflow-y:scroll;
}

.select-sim .options .option {
  overflow:hidden;
}

.select-sim:hover .options .option {
  height:22px;
  overflow:hidden;
}

.select-sim .options .option img {
  vertical-align:middle;
}

.select-sim .options .option label {
  display:none;
}

.select-sim .options .option input {
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  float:left;
  display:inline-block;
  /* "hack" para que funcione en Firefox */
  position: absolute;
  left: -10000px;
}

.select-sim .options .option input:checked + label {
  display:block;
  width:100%;
}

.select-sim:hover .options .option input + label {
  display:block;
}

.select-sim:hover .options .option input:checked + label {
  background:#fffff0;
}
<div class="select-sim" id="select-color">
  <div class="options">
    <div class="option">
      <input type="radio" name="color" value="" id="color-" checked />
      <label for="color-">
        <img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Selecciona un color
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="rojo" id="color-rojo" />
      <label for="color-rojo">
        <img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Rojo
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="verde" id="color-verde" />
      <label for="color-verde">
        <img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Verde
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="rojo" id="color-azul" />
      <label for="color-azul">
        <img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Azul
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="verde" id="color-amarillo" />
      <label for="color-amarillo">
        <img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Amarillo
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="rojo" id="color-rosa" />
      <label for="color-rosa">
        <img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Rosa
      </label>
    </div>
    <div class="option">
      <input type="radio" name="color" value="verde" id="color-celeste" />
      <label for="color-celeste">
        <img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Celeste
      </label>
    </div>
  </div>
</div>

2

En base a la respuesta de stack over flow en ingles :

Jamas va a funcionar, ya que entregas un href de la imagen a una etiqueta <a>, debes darle al <option> la imagen, intenta con esto :

<select>
   <option value="100" style="background-image:url(images/anillo.png);"></option>
   <option value="100" style="background-image:url(images/utileria.png);"></option>
   <option value="100" style="background-image:url(images/joyeria.jpg);"></option>
</select> 

En la respuesta a la que hice referencia, te explican ademas como conseguir esto a nivel de css, sin embargo, dudo que te sirva ya que tienes mas de 255 imagenes las cuales quieren listar en un selector.

EDICION

Tal como comento @blonfu no en todos los navegadores es posible realizar esta accion asi de simple, lo mejor es crear y ocupar otros elementos html para llegar al resultado que esperas, este codigo te puede servir para empezar, obviamente modificando css!

 $(".dropdown img.flag").addClass("flagvisibility");
    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();
    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a span").html(text);
        $(".dropdown dd ul").hide();
        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });

    $(".dropdown img.flag").toggleClass("flagvisibility");
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#000000; text-decoration:none; outline:none;}
.dropdown dt a {background: url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
                 width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background: none repeat scroll 0 0; color:#C5C0B0; display:none;
                  left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}

.dropdown img.flag { vertical-align:middle; margin-right:10px; float:left;}
.flagvisibility { display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="sample" class="dropdown">
        <dt><a href="#"><span>Seleccione : </span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Imagen 1<img class="flag" style="width:70px;" src="http://sports.kekava.lv/sa/wp-content/uploads/2016/09/futbola-bumba.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">Imagen 2<img class="flag" style="width:70px;" src="http://sports.kekava.lv/sa/wp-content/uploads/2016/09/futbola-bumba.png" alt="" /><span class="value">FR</span></a></li>

            </ul>
        </dd>
    </dl>

3
  • 2
    ¿Te funciona eso? Añadiendo ancho y alto para que entren las imágenes solo me funciona en Firefox, en Chrome e IE no.
    – user7176
    Commented el 16 dic. 2016 a las 12:46
  • toda la razon, chrome no me funciona...
    – sioesi
    Commented el 16 dic. 2016 a las 12:51
  • 1
    @blonfu edite, quizas asi si funcione
    – sioesi
    Commented el 16 dic. 2016 a las 13:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.