不规则可点击形状的图案

Question

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

我想这个解决方案将包含两个部分,整个彩色玻璃图像的彩色版本和它上面的黑白版本.然后不知何故,点击时每个小玻璃窗都需要隐藏它下面的黑色和白色部分,以显示下面的彩色图像.

我不知道最好的解决方案是什么,并没有找到任何有用的帮助沿着类似的形状和随机的交互区域做一些事情.我在结果下方插入了一个示例,想象每个玻璃部分都是可点击的,点击后会显示颜色.

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

Answer 1

要制作不规则可点击多边形的模式,您可以使用内联SVG:

• 在SVG链接<a>元素
• 用于制作形状的多边形元素

它允许您设计任何可点击的形状并使其响应.

下面是一个示例,您可以使用悬停和焦点状态来使形状交互:

svg {
  display:block;
  width:40%; height:auto;
  margin:0 auto;
}
polygon {  
  fill:#ccc;
  stroke:#fff; stroke-width:0.3;
  transition: fill .15s;
}
a:hover .teal { fill:teal; }
a:hover .pink { fill:pink; }
a:focus .teal, 
a:focus .pink { fill:orange; }

<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元素.

Answer 2

图像区域地图当然可以帮助您.

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

例

<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>

基本上,您可以为图像的某些部分指定具有不同链接的不同区域.它更容易做而不是解释它!:)