Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery

How Do I Make A Search Function For Multiple Of Images In Html

Post a Comment
I am new in building a html website. I have many gif animations in a folder. I want to make a search function in javascript so that it can search keyword of images and if an image

Solution 1:

You can use <select> element with <option> element values set to name of image file or full path to image file. At change event set <input type="image"> element .src property to .value of <select> element.

You can link to an element from same document or a different document using fragment identifier #id where id is .id of element at <a> element href attribute.

#sel {
  position: relative;
  top: 50px;
}
<!DOCTYPE html>
<html>

<body>
<a href="#sel">sel categories</a>
  <select id="sel"> 
<option value="cats">Cats</option> 
<option value="nature">Nature</option> 
<option value="city">City</option> 
<option value="animals">Animals</option> 
</select><br>
  <input type="image" id="go" src="" alt="Search" />
  <script>
    var select = document.querySelector("select#sel");
    var img = document.querySelector("input[type=image]");
    select.onchange = function() {
      img.src = "http://lorempixel.com/50/50/" + select.value
    }
  </script>
</body>

</html>

Post a Comment for "How Do I Make A Search Function For Multiple Of Images In Html"