web-dev-qa-db-ja.com

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

多くの非矩形形状のパターンを作成する必要があります。各シェイプはインタラクティブで、クリックすると画像が表示される必要があります。
リクエストは、ステンドグラスの画像を撮影し、それを画像で満たされたウェブページに変換することです。各ペインはクリック可能にする必要があります、教会で見られるものと似ていますが、最初のロードでは各シェイプが白黒で、クリックすると色が表示されますガラス。

このソリューションには、ステンドグラス画像全体のカラーバージョンと、その上にある白黒バージョンの2つの部分が含まれると思います。次に、クリック時に小さなガラスペインごとに、その下の白黒部分を非表示にして、下のカラーイメージを表示する必要があります。

私はこれについて最善の解決策が何であるかわからず、形状とランダムなインタラクティブエリア。結果の例を下に挿入しました。各ガラス部分がクリック可能で、クリックすると色が表示されると想像してください。

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

Random shaped interactive, clackable areas

javascripthtmlcsscss3svg
42
po10cySA

不規則なクリック可能なポリゴンのパターンを作成するには、インライン[〜＃〜] svg [〜＃〜]と：

任意のクリック可能な図形を設計し、それらを応答可能にすることができます。

以下は、ホバーしたフォーカス状態でシェイプをインタラクティブにするためにできることの例です。

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 を使用する必要があります。

86
web-tiki

画像エリアマップは確かに役立ちます。

this websiteをご覧ください。これは非常に便利なツールです！

例

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

基本的に、画像の一部に異なるリンクを使用して、異なる領域を割り当てることができます。説明するよりも行う方が簡単です！ :)

9
Luca De Nardi

それは長い仕事ですが、これはあなたを助けることができます： 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>
2
Hitmands

<map>- tag を探しているようです。

ただし、これはクリックする長方形の領域のみを作成します。 ただし、javascriptのonclickメソッドを使用して、マウスが特定の領域にあるかどうかを確認できます。この方法で、円形領域、三角形領域、または基本的に任意の形状の領域を確認することもできます。

0
StuntHacks