视差上的可点击图像答案

【问题标题】：Clickable images on parallax视差上的可点击图像
【发布时间】：2017-02-22 11:35:22
【问题描述】：

我想要做的是创建菜单，而不是链接，一个可点击的图像。但是，这些图像是视差层。我应该如何处理这个？可点击的图片应该在不同的图层上吗？

这是我要使用的图像。我希望背景中的那个塔带你去画廊，但同时，那个层，如前所述，会产生视差。

有什么想法吗？

【问题讨论】：

另外，在这个网站上也可以看到同样的效果：madwell.com
这是网页吗？你打算用什么前端框架？我认为“java”标签是错误的
不确定如何解决这个问题。目前任何可行的方法都对我有好处。是的，它将是网页
你完全需要javascript，而不是java
谢谢，我编辑了标签

标签： javascript css menu parallax layer

【解决方案1】：

如果您创建一个包含绝对定位链接作为导航形式的单独视差层，这可能是个好主意。如果您严格要将图像上的某些区域映射为链接，您可能需要使用此示例中的标签，该示例取自 here：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

形状定义了每个可点击区域的区域类型，坐标定义了所述区域的周长； href 属性定义了点击该区域时页面的导航位置。

要使用非基本形状实现此目的，您可以将类型设置为“poly”，然后将多边形的每个锚点的坐标设置为：

<area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Yellow star.">

【讨论】：

但这些都是原始形状，不是吗？我也可以使用自定义形状吗？
调整了我的答案以包含实现自定义地图区域形状的解决方案
我会试试这个，让你知道
我确实使用形状来获得它，但这可以应对视差吗？使用视差时坐标会发生变化，所以我认为这不是最好的解决方案
这将使图像上的可点击区域固定在图像上，因此它们应该一起移动。如果您想让可点击区域将视差移动到图像上，您需要为导航创建一个新的视差层，因此需要一种不同的方法。