不規則なクリック可能な形のパターン

Question

多くの非長方形のパターンのパターンを作る必要があります。各図形はインタラクティブでなければならず、クリック時に画像を表示する必要があります。
ステンドグラスのイメージを撮影し、それをイメージで満たされたWebページに変換することです。各ペインはクリック可能でなければなりません、あなたが教会で見るものに似ていますが、最初にそれぞれの形状が白黒であり、クリックするとガラスの色が見えます。

私は、この解決策では、ステンドグラスイメージ全体のカラーバージョンとそれの黒と白のバージョンのオンタップを2つの部分で網羅しています。それから何とかクリックすると小さなガラスのペインが黒い部分と白い部分を隠す必要があり、その下にカラー画像が現れます。

私はこれについて移動する最善の解決策がどうなるかは分からないし、形状などのランダムなインタラクティブ領域と似た何かをすることの道に沿って支援する便利なものを発見していません。私は結果の下の例を挿入しました。それぞれのガラス部分がクリック可能で、クリックすると色が現れると想像してください。

白い線は、各ペインが他と独立して動作することを示しています。

Answer 1

が不規則なクリッカブルポリゴンのパターンを作るために、あなたがインラインSVGを使用することができます：

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

ポリゴン要素のみポリゴンを可能にします。曲面を作成する場合は、curve commandsの要素pathを使用する必要があります。

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>