Question

我是建立HTML网站的新手。

我在一个文件夹中有很多gif动画。我想在javascript中创建搜索功能，以便它可以搜索图像的关键字，如果图像存在则可以显示图像，如果不存在则会显示，请输入另一个关键字。

＆＃13;

<form action="#" method="post" id="search">
        <input type="text" value="Type to filter&hellip;" onfocus="this.value=(this.value=='Type to filter&hellip;')? '' : this.value ;" />
        <input type="image" id="go" src="file:///D:/new/index.png" alt="Search" />
    </form>

＆＃13;

Answer 1

您可以使用<select>元素，其中<option>元素值设置为图像文件的名称或图像文件的完整路径。在change事件集<input type="image">元素.src属性.value元素的<select>。

您可以使用片段标识document链接到来自同一document或不同#id的元素，其中id是.id元素<a>元素href属性。

#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>

如何在html中为多个图像创建搜索功能

1 个答案: