HTML重叠图像

Question

我必须在网页上放置一个如下所示的圆柱体：

它由重叠的小图像组成，以绘制表面上的曲线。它们中的每一个都是页面上的位置，其中包含一个不同的img标记，该标记包含在具有自己的href的锚中。 img的z-index属性用于使它们以正确的方式重叠。 圆柱必须是由于它是动态创建的，所以从图像中可以看出，它的面可以有不同的颜色。

我需要做的是让所有面孔都可以点击，每个面都必须指向不同的网址。

我的问题当然是圆柱体有曲线。而且我必须确保点击指向正确的URL，特别是在曲线附近，它在像素级别上并不精确，但至少可以接受。

我试图为构成圆柱体的每个图像使用单个区域的地图，但当然它不起作用，正如我从规范中看到的那样，在这种情况下只有第一个声明的地图DOM工作。

我正在考虑通过Javascript解决这个问题，但我认为这不是一件容易的工作，所以如果有人可以就我应该尝试什么给我一些建议，我会很高兴。

哦，我无法使用HTML5功能来解决这个问题。

Answer 1

应用旧技术解决难题。

我可以想到两种方法。一种是在圆柱顶部放置透明（矩形）图像，并使用shape="poly"属性创建HTML图像映射。对于资源，请搜索HTML元素map和area以供参考，尤其是shape属性。网上应该有很多好的教程。如今这种技术已经不再使用了，但它在90年代后期非常流行。

另一种方法是在javascript中使用事件委托，将事件侦听器附加到主容器。在每个图像上，“像素”为其所在的圆柱体的适当部分应用CSS类。在事件处理程序中，您可以根据所单击的图像的类别执行不同的操作，并且可以在没有在每个“像素”上附加事件的巨大开销。在JQuery中，这将是：

$("#cylinder").on("click", ".green", function() { location.href = "green_url"; }
$("#cylinder").on("click", ".red", function() { location.href = "red url"; }

假设您在绿色像素上放置class="green"，在红色像素上放置class="red"。 （你可以通过象限或其他技术来做到这一点;颜色只是一个例子。）

Answer 2

祝你好运SVG！ https://developer.mozilla.org/en-US/docs/SVG/Tutorial
使用html dom元素几乎不可能做到这一点，你必须使用兼容所有浏览器的CSS来弯曲它 还有Canvas，但是你很难处理点击。
只有SVG的问题是它不支持＆lt; IE8，在IE8中几乎没有。但弯曲DOM元素也是不可用的＆lt; IE9。

编辑：
我看到你不能使用HTML5，所以你唯一的机会就是在GD2中生成整个图像，并试图映射这些点。但是你不能使用HTML5的原因是什么？

Answer 3

您也可以尝试通过getImageData()函数使用javascript / canvas进行操作。此canvas函数将为给定点的rgba值。使用alpha值，您可以检查鼠标是否结束或点击正确的区域，或者它是否是透明区域，并且不会发生任何事情。

我也为此目的制作了jquery插件。也许它可能有所帮助。 http://www.cw-internetdienste.de/pixelselection/