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/

相关文章:

css - 链接区域太小或遮挡了隐藏 div 中的图像

html - 如何更改浏览器搜索结果中突出显示文本的样式?

html - rails : How to add custom data-attributes in collection_select

html - margin 自动不居中我的形象

html - 显示:flex 属性无法在 Internet Explorer 中正确呈现

css - IE 和 Edge 的高对比度下划线问题

css - 在 div 中均匀间隔 href img

javascript - 脚本和 CSS 是否也支持 HTML <base> 标签?

javascript - 什么时候在 JS 中使用 $

c# - 从 DataTable 填充时如何禁用 DataGridView 图像列中的空图像