不规则可点击形状的图案

Question

我需要制作许多非矩形形状的图案。每个形状必须是交互式的，并在点击时显示图像。
请求是将彩色玻璃图像转化为充满图像的网页。每个窗格必须可点击，与您在教堂中看到的类似，但在第一次加载时，每个形状都是黑色和白色，单击它可以显示玻璃的颜色。

我想这个解决方案将包含2个部分，整个彩色玻璃图像的颜色版本和黑色和白色版本ontop。然后以某种方式点击每个小玻璃窗格需要隐藏它下面的黑色和白色部分，以显示下面的彩色图像。

我不知道什么是最好的解决方案去做这件事，并没有发现任何有用的帮助沿着做类似形状和如此随机互动区域类似的方式。我在结果下面插入了一个示例，想象每个玻璃部分都是可点击的，并且点击显示颜色。

白线只是指出每个窗格的行为独立于其他窗格。

Answer 1

为了使不规则点击多边形的模式，你可以使用内联SVG与：

• the SVG链接<a> element
• 的polygon element使形状

它可以让你设计任何点击形状，让他们响应。

这里是你可以用一个悬停做什么，专注状态，使形状互动的例子：

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元素与curve commands一起使用。

Answer 2

图像区域的地图一定能帮助你。

看看this网站，这是一个非常方便的工具！

例

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

基本上，你可以分配不同的区域，不同的环节，为你的形象的一部分。做起来容易，而不是解释它！ :)

Answer 3

看来你正在寻找<map> - tag。

虽然这只能创建矩形区域点击。 但是，您可以使用javascript的onclick方法来检查鼠标是否位于特定区域。这样，您还可以检查圆形区域，三角形区域或基本上任何形状的区域。

Answer 4

这是一个长期的工作，但是，这可以帮助你：http://imagemap-generator.dariodomi.de/

function helloWorld(area) { 
 
    console.log('You\'ve clicked the right part') 
 
}

#container { position: relative; } 
 
#info { 
 
    position: absolute; 
 
    bottom: 90px; 
 
    left: 85px; 
 
    background: yellow; 
 
    display: inline-block; 
 
}

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