html - 如何使图片墙可点击并发送值(value)

Question

在 HTML 中，我有这面墙的不同食物的图片。

<ul>
    <li><p>Sallad</p><img src="img/sallad.jpg"></li>
    <li><p>Pizza</p><img src="img/pizza.jpg"></li>
    <li><p>Sushi</p><img src="img/Sushi.jpg"></li>
    <li><p>Pasta</p><img src="img/pasta.jpeg"></li>
    <li><p>Indian</p><img src="img/indian.jpeg"></li>
    <li><p>Fish</p><img src="img/fish.jpeg"></li>
    <li><p>Burger</p><img src="img/burger.jpeg"></li>
    <li><p>Steak</p><img src="img/steak.jpeg"></li>
    <li><p>Vegetarian</p><img src="img/vegetarian.jpeg"></li>

 </ul>

我的问题基本上是我有一个搜索功能，当我点击其中一张图片时我希望它将我重定向到另一个页面，我知道我基本上可以使用 <a href为此，但问题是我希望这些图片中的每一张都有一个值，以便我的搜索功能可以读取它，然后显示数据库中的搜索结果。即，如果我单击意大利面图片，它将带我进入显示数据库中所有意大利面菜肴的结果页面。

如果你们有任何其他建议或解决方案，我会非常感激。非常感谢您的阅读!

Answer 1

只需使用包含查询字符串的链接即可。

<a href="whatever.jsp?search=salad"><img src="..."></a>

对其他元素进行同样的操作。然后，您可以在服务器端代码中访问名为“search”的 GET 变量。