html - 如何对 HTML 中的图像进行分类并显示通过超链接单击给定类别的所有图像

标签 html css image attributes tags

My dummy wallpaper website目前有 4 个 div,每个 div 都有一个超链接列表,代表我正在制作的虚拟壁纸网站的目录/标签。

我想要 png/jpg 图像(墙纸)并为它们指定类别。例如,带有游戏 Angular 色的图像将具有自己的属性类别,带有自然的图像将具有自己的属性类别等。图像需要能够具有多个类别,因为图像可能具有自然游戏 Angular 色,例如作为天际壁纸中的一座山。

当点击自然的超链接时,所有具有自然类别的图像都会显示,而不管它们所归属的所有其他类别,例如艺术家或分辨率/大小。

我正在尝试找出用于将这些类别分配给图像的工具/代码组合,以及如何使超链接显示具有该类别的所有图像,而不管给定图像可能已分配给它的其他类别。

这是我为超链接的左上角类别放置的代码

<h3>Catagories</h3>
                <ol type="1">
                    <li><a href="Gaming.html">Gaming</a></li>
                    <li><a href="Nature.html">Nature</a></li>
                    <li><a href="Graphical.html">Graphical</a></li>
                    <li><a href="Fanmade.html">Fanmade</a></li>
                </ol>

最佳答案

如果仅使用 HTML 可能的话,这将非常困难。您需要使用 MySQL 和 PHP 来存储和显示图像。 在为数据库制作表格时,您需要2张表格,一张用于属性,一张用于图像。 Image table Attributes table

然后在选择类别时,您可以说:

SELECT * FROM attribute WHERE gaming = 1 AND nature = 1

关于html - 如何对 HTML 中的图像进行分类并显示通过超链接单击给定类别的所有图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56811323/

相关文章:

javascript - 向左/向右滚动带有动画的图像

jquery - 图片对齐,jQuery Lightbox插件重复查看图片,<h2><p>链接?为什么?

c# - 什么是车牌检测的好算法?

javascript - 客户端未在 Socket.IO 中接收事件

html - 将文字放在图片上以适应响应页面

c# - 更新面板中的隐藏字段值未正确更新

javascript - 如何通过单击鼠标更改文本区域的高度

jquery - 如何使用CSS将页面标题居中?

python - 使用 Python 搜索特定的 HTML 字符串

javascript - 如何使用 fetch API 来填充 DIV?