イメージマップ上の不規則な形にマウスのホバー効果を作成する方法

イメージマップ上の不規則な形にマウスホバー効果を作成するには？不規則な形状は、ポリ/長方形/三角形/円形ではなく、ランタンや動物の形で、かなり複雑になります。これは可能でしょうか？イメージマップ上の不規則な形にマウスのホバー効果を作成する方法

出典

2016-07-13 shu

はあなたがこのような形状を強調することを意味しますか？または、マウスオーバーがこの形で発生しますか？ –

これは役に立つかもしれません：http://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag/12667751#12667751 – enhzflep

@MoshFeuはい私は不規則な形状 – shu

あなたが特定の不規則な形状を選択するために、SVGベクター画像を扱う試みることができます。

.shape:hover { 
    fill: green; 
}

とhtml SVG：：

CSSは次のようになり

<svg version="1.0" width="291.000000pt" height="300.000000pt"> 

<g class="rabbit"fill="#000000" stroke="none" transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"> 

<path .../>

例：http://codepen.io/phelpsiv/pen/rLYvrp

出典

2016-07-13 05:28:38 phelpsiv

+1のSVG。 Adobe Illustratorは、SVGを自動的に作成するのに最適です。特定のイメージマップを使用している場合は、Illustratorでそのイメージをトレースし、SVGを書き出した後、このメソッドを使用して任意のシェイプをホバー状態にすることができます。（標準状態を透明にすることもできます） – Okomikeruko

素晴らしいアイデアですが、「イメージマップ」はどうですか？ –

私が見つけた最高のものは、**ハーシュダ・ヒラパラがあなたの得意とする限り、私の知る限りで答えます。 – phelpsiv

はcordinatesをもとにしてみてください。

<map id="honeycomb" name="honeycomb"> 
    <area shape="poly" alt="" title="" coords="493,23,572,65,573,159,491,204,415,158,415,67" href="" target="" /> 
    <area shape="poly" alt="" title="" coords="651,22,732,66,732,158,652,203,574,158,573,66" href="" target="" /> 
    ... 
</map>

デモ： jsFiddle

出典

2016-07-13 05:18:25

イメージマップ上の不規則な形にマウスのホバー効果を作成する方法

答えて

関連する問題