我必须在网页上放置一个如下所示的圆柱体：
它由重叠的小图像组成，以在表面上绘制曲线。它们中的每一个都是页面上的位置，具有不同的 img 标签，该标签包含在具有自己的 href 的锚点中。img 的 z-index 属性用于使它们以正确的方式重叠。圆柱体必须是组合的，因为它是动态创建的，正如您从图像中看到的那样，它的面可以有不同的颜色。
我需要做的是让所有面孔都可点击，并且每个面孔都必须指向不同的 URL。
当然，我的问题是圆柱体有曲线。而且我必须确保点击指向正确的 URL，尤其是在曲线附近，它在像素级别上并不精确，但至少可以接受。
我尝试为构成圆柱体的每个图像使用具有单个区域的地图，但当然它不起作用，正如我从规范中看到的那样，在这种情况下，只有 DOM 中第一个声明的地图有效.
我正在考虑通过 Javascript 解决这个问题，但我认为这不是一件容易的事，所以如果有人能给我一些关于我应该尝试什么的建议，我会很高兴。
哦，我不能使用 HTML5 功能来解决这个问题。
巧妙地应用旧技术来解决具有挑战性的难题。
我可以为你想出两条前进的道路。一种是在圆柱体顶部放置一个透明（矩形）图像，并使用该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"红色像素放在一起。（您可以通过象限或其他技术做到这一点；颜色只是一个示例）。
祝你好运 SVG ！https://developer.mozilla.org/en-US/docs/SVG/Tutorial
使用 html dom 元素几乎不可能做到这一点，您必须使用与 CSS 兼容的所有浏览器来弯曲它。
还有 Canvas，但您将很难处理点击次数。
SVG 的唯一问题是它在 < IE8 中不受支持，在 IE8 中几乎不支持。但是弯曲 DOM 元素也不可用 < IE9。
编辑：
我看到你不能使用 HTML5，所以你唯一的机会是在 GD2 中生成整个图像并尝试映射点。但是你不能使用 HTML5 的原因是什么？
您也可以尝试通过getImageData()函数使用 javascript / canvas 来实现。这个画布函数将给定点的 rgba 值。使用 alpha 值，您可以检查鼠标是否悬停或单击正确的区域，或者它是否是透明区域并且什么都不会发生。
我也为此目的制作了 jquery 插件。也许它可能会有所帮助。http://www.cw-internetdienste.de/pixelselection/