html - 将许多元素放置在图像上以提供交互性的最佳方式

考虑到所附图片，我希望每个“单元格”(可以这么说)上面都有一个 DOM 元素，以便可以单击它、设置背景等等。

我尝试制作一个表格并稍作调整，使其适用于 Firefox。我打开其他浏览器，Firefox 中的微调不适用于它们。

你会怎么做？有 465 个单元格需要可点击并全部叠加在图像中的单元格上，定位误差尽可能小。

编辑:
这是 JSFiddle:http://jsfiddle.net/Francisc/PUPHz/embedded/result/

谢谢。 enter image description here

最佳答案

这是我会做的，它很乱，但它可以工作。使单个 div 适合左上角并找出最佳宽度和高度(我猜你从你试过的表格中知道)

你必须让图像在 div 下，所以我认为你必须给它一个覆盖属性或类似的东西(不记得它叫什么)所以记住你有每个 div 的类width: XXpx height: XXpx float:left 应该就是这样。从那里你可以制作 :hover 类来改变背景，如果需要的话还可以选择一个类。

希望对你有帮助

关于html - 将许多元素放置在图像上以提供交互性的最佳方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6758655/

相关文章：

jquery - 我怎样才能将页脚推到页面的最底部，而不管正文中的内容有多少？