如何在html中为多个图像创建搜索功能 [英] How do I make a search function for multiple of images in html
问题描述
我是新建HTML网站的。
我在一个文件夹中有很多gif动画。我想在javascript中做一个搜索功能，这样它可以搜索图像的关键字，如果图像存在，它可以显示图像，如果不存在，它会显示请输入另一个关键字。
< form action =＃method =postid = 搜索 > < input type =textvalue =输入过滤器& hellip; onfocus =this.value =（this.value =='Type to filter& hellip;'）？''：this.value; /> < input type =imageid =gosrc =file：/// D：/new/index.pngalt =Search/> < / form>
您可以将< select> 元素与< option> 元素值设置为图片文件的名称或图像文件的完整路径。在变化事件集< input type =image> 元素 .src 属性为 .value < select> 元素。
您可以使用片段标识符链接到同一个文档或另一个文档的元素元素< #id 其中 id 是 .id code>< a> 元素 href 属性。
#sel {position：relative; <！c $ c><！DOCTYPE html><<>> ; html>< body>< a href =＃sel> sel类别< / a> < select id =sel> < option value =cats> Cats< / option> < option value =自然>自然< / option> < option value =city>城市< / option> < option value =animals>动物< / option> < /选择><峰; br> < input type =imageid =gosrc =alt =Search/> <脚本> 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>
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 exist it can display the image, if not exist it will display please enter another keyword.
<form action="#" method="post" id="search">
<input type="text" value="Type to filter…" onfocus="this.value=(this.value=='Type to filter…')? '' : this.value ;" />
<input type="image" id="go" src="file:///D:/new/index.png" alt="Search" />
</form>
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>
这篇关于如何在html中为多个图像创建搜索功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
