javascript-不规则可点击形状的图案

我需要制作许多非矩形形状的图案。 每个形状都必须是交互式的,并在单击时显示图像。
要求是拍摄彩色玻璃的图像,然后将其转换为充满该图像的网页。 每个窗格都必须是可单击的,类似于您在教堂中看到的那样,但是在首次加载时,每个形状都是黑白的,单击时会显示玻璃的颜色。

我想这个解决方案将包括两个部分,整个彩色玻璃图像的彩色版本和其顶部的黑白版本。 然后,以某种方式单击时,每个小玻璃窗格都需要隐藏其下方的黑白部分以显示其下方的彩色图像。

我不知道实现此目标的最佳解决方案是什么,并且还没有发现任何有用的方法来帮助完成形状和随机交互区域的相似操作。 我在结果下方插入了一个示例,假设每个玻璃部分都是可单击的,并且单击显示颜色。

白线仅表示每个窗格的行为独立于其他窗格。

Random shaped interactive, clackable areas

po10cySA asked 2020-08-10T09:47:42Z
4个解决方案
86 votes

要制作不规则可点击多边形的图案,可以将内联SVG用于:

  • SVG链接<svg viewbox="0 0 20 19"> <a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a> <a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a> <a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a> <a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a> <a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a> <a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a> <a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a> <a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a> <a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a> </svg>元素
  • 用于制作形状的多边形元素

它将允许您设计任何可点击的形状并使它们响应。

这是一个示例,说明如何使用悬停和聚焦状态使形状具有交互性:

<svg viewbox="0 0 20 19">
  <a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a>
  <a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a>
  <a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a>
</svg>
<svg viewbox="0 0 20 19">
  <a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a>
  <a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a>
  <a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a>
</svg>

多边形元素仅允许使用多边形。 如果要制作弯曲形状,则需要在path命令中使用path元素。

web-tiki answered 2020-08-10T09:48:10Z
9 votes

图像区域图当然可以为您提供帮助。

看看这个网站,这是一个非常方便的工具!

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="LINK1" shape="poly" coords="380,163,448,127,515,163,457,205" />
    <area alt="" title="" href="LINK2" shape="poly" coords="140,13,48,1,55,13,47,12" />
</map>

基本上,您可以为图像的各个部分分配具有不同链接的不同区域。 做起来比解释起来容易! :)

Luca De Nardi answered 2020-08-10T09:48:43Z
2 votes

这是一项漫长的工作,但这可以帮助您:[http://imagemap-generator.dariodomi.de/]

<section id="container">
<img src="https://i.stack.imgur.com/4KmlR.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="javascript:helloWorld()" shape="poly" coords="66,282,73,284,79,303,78,320,49,328,48,317" />
    [...]
</map>

<span id="info">&lt;== click here</span>
</section>
<section id="container">
<img src="https://i.stack.imgur.com/4KmlR.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="javascript:helloWorld()" shape="poly" coords="66,282,73,284,79,303,78,320,49,328,48,317" />
    [...]
</map>

<span id="info">&lt;== click here</span>
</section>
<section id="container">
<img src="https://i.stack.imgur.com/4KmlR.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="javascript:helloWorld()" shape="poly" coords="66,282,73,284,79,303,78,320,49,328,48,317" />
    [...]
</map>

<span id="info">&lt;== click here</span>
</section>

Hitmands answered 2020-08-10T09:49:03Z
0 votes

您似乎正在寻找<map>标签。

但是,这只会创建要单击的矩形区域。 但是,您可以使用javascript的onclick方法检查鼠标是否在特定区域内。 这样,您还可以检查圆形区域,三角形区域或基本上任何形状的区域。

StuntHacks answered 2020-08-10T09:49:33Z
translate from https://stackoverflow.com:/questions/44302230/pattern-of-irregular-clickable-shapes