javascript - 将图像拆分为多个 div

Question

我正在尝试将图像拆分为许多 div 。我的主要目标是使这些 div 可点击并将点击的 div 替换为另一个图像（例如颜色变为绿色表示“OK”或红色表示“错误”）。如何使 div 可点击？

标签： javascripthtmlcss

Answer 1

我认为，最安全的选择是首先拆分图像并创建单独的块（div 或 tds）。

然后你可以改变图像的来源。

但是如果你真的想保留一张图片，你可以考虑 JavaScript 并为整个图片块创建事件监听器，同时它会检查你点击的 Y、X 坐标，并在其中插入新的 div，你将放置具有某些属性的图像（例如背景位置，它定义为仅显示此图像的一部分）...

我猜，PHP 也有一些图像切片功能，所以它可能会根据位置（同样来自 JavaScript）为您生成“更小”的图像，您将获得所需子图像的来源。

编辑

另外......您可以只为容器 div 使用该背景图像，并且您将放置具有指定宽度和高度的 div，以便它们覆盖您的背景，但将可见性设置为隐藏，为所有这些应用事件侦听器，这将只是切换可见性（或只是切换具有可见性的类）。