How do I make a search function for multiple of images in html

后端未结

关注

 1  1154

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

相关标签:

1条回答

情深已故

2021-01-26 07:20

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>

0 讨论(0)