現在、ウェブサイト用に青く円形の円グラフ風の画像を作成しようとしています。円は 6 つの異なるセグメントに分割されます。
私が望んでいるのは、ユーザーが特定のセグメントにカーソルを合わせると、このセグメントがオレンジ色に変わり、そのセグメントに対応する円の横にテキストが表示されることです。
CSS イメージ マップを使用して必要な効果をほぼ実現するリソースをオンラインでいくつか見つけました。http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ただし、これらの手法は長方形を使用して画像を分割します。円形のオブジェクトを分割する場合は、特定の円弧に基づいて領域を分割することをお勧めします。
これは、純粋な HTML と CSS の範囲を超えていると思います。JQuery の経験はありますが、Web 言語の経験はあまりありません。問題を解決するために必要なテクニックと、それを実装するのに最適なテクノロジーは何か?
長方形ではなく多角形を使用したイメージ マップを作成できます。
この便利なツールhttp://www.image-maps.com/を使用すると、独自のポリゴン マッピングを作成しなくても、探しているものを実現できます。
いくつかのオプション:
HTML イメージ マップ
円の各スライスの形状に非常に近い HTML イメージ マップを作成するのは簡単ですが、HTML イメージ マップには制限があります。たとえば、イメージ マップの各スライス内にコンテンツをネストすることはできません (ホバー ポップアップを実装する簡単な方法として)。HTML イメージ マップで十分な場合は、これが最も簡単なソリューションです。
CSS イメージ マップ
円スライスの形状を定義するために、各円スライスのホットスポットの非常に大まかな近似が必要な場合を除き、CSS イメージ マップは実用的ではありません。しかし、それを受け入れることができれば、機能に関する限り、より多くの柔軟性が得られます.
onmousemove
また、円全体の onmousemove イベント ハンドラーを使用してマウス座標を取得し、独自の計算を行って、マウスがどの円スライスにあるかを判断することもできます。これにより、各円スライスのホットスポットを正確に定義できます。 HTML イメージ マップよりも柔軟性があります。ただし、計算には少し手間がかかる場合があります。
私は主に HTML と CSS を使用し、小さな jQuery を使用して、円の横にあるテキストの表示を処理するソリューションを用意しています。
ただし、次のようなあまり広くサポートされていないいくつかの CSS プロパティを使用します。pointer-events