如何为HTML中的多个图像创建搜索功能

Question

I am new in building a html website. 我是建立HTML网站的新手。

I have many gif animations in a folder. 我的文件夹中有很多gif动画。 I want to make a search function in javascript so that it can search keyword of images and if an image exist it can display the image, if not exist it will display please enter another keyword. 我想在javascript中创建搜索功能，以便它可以搜索图像的关键字，如果存在图像，则可以显示图像，如果不存在，它将显示图像，请输入另一个关键字。

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

Answer 1

You can use <select> element with <option> element values set to name of image file or full path to image file. 您可以将<select>元素与<option>元素值设置为图像文件的名称或图像文件的完整路径一起使用。 At change event set <input type="image"> element .src property to .value of <select> element. 在change事件中，将<input type="image">元素.src属性设置为<select>元素的.value 。

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. 您可以使用片段标识符#id链接到同一document或不同document的元素，其中id是<a> element href属性中元素的.id 。

 #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 个解决方案

解决方案1
0 2017-07-23 02:31:16

如何为HTML中的多个图像创建搜索功能

问题描述

1 个解决方案

解决方案1 0 2017-07-23 02:31:16

解决方案1
0 2017-07-23 02:31:16