不規則可點擊形狀的圖案

我需要製作許多非矩形形狀的圖案。每個形狀必須是交互式的，並在點擊時顯示圖像。
請求是將彩色玻璃圖像轉化爲充滿圖像的網頁。每個窗格必須可點擊，與您在教堂中看到的類似，但在第一次加載時，每個形狀都是黑色和白色，單擊它可以顯示玻璃的顏色。不規則可點擊形狀的圖案

我想這個解決方案將包含2個部分，整個彩色玻璃圖像的顏色版本和黑色和白色版本ontop。然後以某種方式點擊每個小玻璃窗格需要隱藏它下面的黑色和白色部分，以顯示下面的彩色圖像。

我不知道什麼是最好的解決方案去做這件事，並沒有發現任何有用的幫助沿着做類似形狀和如此隨機互動區域類似的方式。我在結果下面插入了一個示例，想象每個玻璃部分都是可點擊的，並且點擊顯示顏色。

白線只是指出每個窗格的行爲獨立於其他窗格。

來源

2017-06-01 po10cySA

+21

這是'

的工作你真是一個奇怪的客戶！出於好奇，我希望看到上下文，或完成後的最終產品。 –

可點擊的Voronoi圖有很多d3的例子，你可能會發現有趣的是看看那些。 – theonlygusti

爲了使不規則點擊多邊形的模式，你可以使用內聯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一起使用。

來源

2017-06-01 09:37:20

+10

您也可以使用JavaScript直接訪問元素，並添加事件偵聽器，比如點擊刪除窗格：https：//jsfiddle.net/52rrxnsf/2/ – ComFreek

是@ComFreek，您可以使用CSS *，add過渡和更多... –

這似乎正是我需要的，標記爲答案。感謝您的幫助。 – po10cySA

圖像區域的地圖一定能幫助你。

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

基本上，你可以分配不同的區域，不同的環節，爲你的形象的一部分。做起來容易，而不是解釋它！ :)

來源

2017-06-01 08:25:46

看來你正在尋找<map> - tag。

~~雖然這隻能創建矩形區域點擊。~~ 但是，您可以使用javascript的onclick方法來檢查鼠標是否位於特定區域。這樣，您還可以檢查圓形區域，三角形區域或基本上任何形狀的區域。

來源

2017-06-01 08:28:08 StuntHacks

這不是真的，你只能有矩形區域，你可以創建任何多邊形形狀！ –

噢好吧，我不知道。修復。 – StuntHacks

這是一個長期的工作，但是，這可以幫助你：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>

來源

2017-06-01 08:32:35 Hitmands

不規則可點擊形狀的圖案

回答

相關問題