How can I design interface to ask user to select an image from given images?

Question

I want to ask user to select an image from the displayed images. How I can I do that? I want something as the picture:

I have tried the code:

<div class="tab">Select an image:
  <select>
    <option value="11"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <option value="12"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <option value="13"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <option value="14"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <br>
    <option value="21"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <option value="22"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <option value="23"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <option value="24"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <br>
    <option value="31"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <option value="32"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <option value="33"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <option value="34"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
    </option>
    <br>
</div>

My output:

use background-color as here - https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list — s.kuznetsov, May 02 '21 at 17:26
Just add a `click` event listener to images to select them in memory — T J, May 02 '21 at 18:05

DCR · Answer 1 · 2021-05-02T19:03:11.293

const imgs = document.querySelectorAll('img')
for (let i = 0;i<imgs.length;i++){
   imgs[i].addEventListener('click',displayme)
}


function displayme(e){ 
  document.getElementById('container').innerHTML = e.target.outerHTML  
}

#container{
   display:flex;
   flex-direction:column;
   align-items:center;
}

.row{
   display:flex;
   }

<div id='container'>
   <div class = 'row'>
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
   </div>
   <div class = 'row'>
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
   </div>
   <div class = 'row'>
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
   </div>
</div>

score 0 · Answer 2 · answered May 02 '21 at 18:19

I got something like this : select2

As far as I know, It can't be done by HTML and CSS only. background-image only works on Firefox. Hence jQuery is required with select2 which is designed to replace a standard <select> box that is displayed by the browser.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
</head>
<body>
  <select id='id_select2_example' multiple="multiple" style='min-width:200px'>
   <option value="11" data-img_src="https://www.w3schools.com/images/w3schools_green.jpg"></option>
   <option value="12" data-img_src="https://www.w3schools.com/images/w3schools_green.jpg"></option>
   <option value="13" data-img_src="https://www.w3schools.com/images/w3schools_green.jpg"></option>
  </select>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
  </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js">
  </script>
  
  <script type="text/javascript">
      $(document).ready(function(){
        $("#id_select2_example").select2({
          templateResult: customTemplate
        });
      });
 
      function customTemplate (obj) {
        var data = $(obj.element).data();
        if (data && data['img_src']) { 
          let $img_src = data['img_src'];
          let $template = $("<div><img src=\"" + $img_src + "\" style=\"width:100%;height:150px;\"/></div>");
          return $template;
        }
      }

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

How can I design interface to ask user to select an image from given images?

2 Answers2