選択可能な部分でグラフィック要素を作成します

Question

私はCSSを使用して、このようなものを作成するために探しています：

私は、各色の部分の上にマウスを置くと、私はセクションの色を変更できるようにしたいですポップアップが表示されます。

私がイメージマップ&クリッカブルエリアCOORDSでキャンバスを使用して、これを取り組むための一つの方法ですが、私はCSSでグラフィックを作成して設定することができるようになる簡単な方法は、おそらくがある場合、私は思ったんだけどということを知っていますクラスごとにクラスです。

Answer 1

SVGを使用する必要があります。実際のSVGマークアップは、いくつかのグループ化された要素としてHTMLに埋め込むことができます。

JavaScriptイベントをワイヤリングしたり、CSS :hoverで要素をターゲティングしたりすることができます。ブラウザは正確な形状を知っているので、ピクセル精度のマウスオーバーを得ることができます。

circle:hover { 
 
    opacity: 0.5; 
 
}

<svg width="500" height="500"> 
 
    <circle id="circle1" cx="50" cy="50" r="20" fill="red"/> 
 
    <circle id="circle2" cx="150" cy="50" r="40" fill="green"/> 
 
    <circle id="circle3" cx="200" cy="50" r="30" fill="blue"/> 
 
</svg>

アドビイラストレーターやスケッチを出力することができSVGのアートワークなどのベクトル編集パッケージの

充実しています。 online SVG editorsもあります。