Question

我是编码和广场空间的新手，并且想知道在方形空间上是否有这样的东西：https://xd.adobe.com/view/a7d76d93-ca9e-4fa6-af5b-78a040a82bf3/ 我的公司希望我找到一种方法，让第一张图片可以点击并显示另一张图片（取决于您点击的位置），以显示您点击的一个地方的可用性。然后，我们还希望第二张图像在点击时显示第三张图像。这在方形空间中甚至可能吗？如果是这样，我该怎么做？

Answer 1

要直接回答您的第一个问题，可以通过代码块或代码注入来回答。从本质上讲，您将向Squarespace网站添加全新的自定义代码。

为了回答你的第二个问题，它将是一个完全自定义的实现 - 也就是说，Squarespace中没有任何阻止或内置功能，这将有助于促进此功能。因此，“你如何做”将归结为大量的自定义代码开发（同样，一般说来）。

提供额外的视角：考虑到，在移动设备上，屏幕空间更加有限（可点击区域可能变得非常小），并且覆盖交互式元素可能需要额外的测试以确保跨不同移动设备的预期行为，系统，操作系统版本和浏览器。提前考虑这些事情（或者可能在此过程中进行测试）可能会导致您重新考虑整体上的交互和UI行为（即，远离多个重叠图像以及更垂直友好的行为和交互集合，作为一个可能的例子）。

Answer 2

在过去，我们使用了image-map。它仍然有效。使用图像映射，您可以绘制一个多边形，这是一个可点击链接到另一个页面（或触发一些JavaScript）。

如果您希望它能够很好地扩展（在响应式设计中），则需要some kind of plugin。

以最简单的形式，链接会将用户带到另一个带有另一个图像映射或其他导航模式的页面。 Example

我想可以在Squarespace中的一些自定义代码块中执行此操作，只需链接到其他几个带有图像/图像映射或图库的页面。

如果您没有Dreamweaver或类似工具，那里有工具可以帮助您绘制多边形（搜索“图像映射生成器”）。

其他方法： 如果您希望在没有插件的情况下进行缩放，可以使用 SVG 而不是图像映射。如果您只使用矩形热点，也可以尝试使用 CSS 替换图像映射的this site。

以下是仅使用html和css的示例：

html, div, p, a {
  font-family: arial;
}
.map-image {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.map-image img {
  width: 100%;
  height: auto;
  display:block;
}
.map-image a {
  text-decoration: none;
  padding: 5px;
  color: #FFF;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  margin: 0;
  font-size: 4vw;
}
.map-image a:hover {
  border: 1px solid #FFF;
  margin: -1px;
}

<div class="map-image">
  <img src="http://cdn.frooition.com/060129/images/100_1428.JPG">
  <a href="https://www.google.com" title="Front window" style="position: absolute; left: 24.4%; top: 17.5%; width: 33.3%; height: 25.39%; z-index: 99; background-color:rgba(255,0,0,0.3);">Google</a>
  <a href="https://www.facebook.com" title="Seats" style="position: absolute; left: 58%; top: 0.16%; width: 28.4%; height: 26.33%;  z-index: 99; background-color:rgba(0,255,255,0.2);">Facebook</a>
  <a href="https://www.linkedin.com/" title="Wheel" style="position: absolute; left: 45%; top: 57.68%; width: 19%; height: 39.34%; z-index: 99; background-color:rgba(0,255,0,0.2);">Linkedin</a>
</div>

（如果您是编码的新手，在这种情况下，弹出窗口可能不是正确的搜索词。链接到其他页面比在同一页面上“弹出”更容易。）

弹出图像代码？

2 个答案: