web-dev-qa-db-ja.com

エリアマップにCSSを適用する

私は、マップ内の領域に対して多くのポリゴンエリア(それぞれ20以上の座標)を持つ非常に大きなマップを作成しました。ただし、cssをAREAタグに追加することはできません。表示される要素ではないからです。私がやりたいのは、ユーザーがマップ上のエリアにカーソルを合わせたときに、特定のAREA要素に1pxの境界線を適用することで、そのエリアを「強調表示」したいということです。これを行う方法はありますか?いいえ、長方形を使用するつもりはありません。

22
user2385136

任意の形状を使用しながらスタイルを使用できるようにしたい場合は、SVGを試すことを検討しましたか?

私はSVGマスターではありませんが、私が作成した例を次に示します: http://jsfiddle.net/tZKuv/3/ 。プロダクションの場合、デフォルトのストロークをnoneに置き換えることができます。どこにあるかがわかるように、grayを使用しました。

不利な点は、使いやすいエリア/マップが失われることですが、このルートに行けば目標を達成できると思います。ポリゴンにcursor: pointerを追加しました。onclickハンドラーを追加して、<area>hrefをシミュレートできます。

明らかな警告はブラウザのサポートです。これはChromeで動作しているようで、IE9でも動作するはずです(現時点ではjsfiddleはIE9で動作していません)が、以前のバージョンのIEはSVGをサポートしていません。

Update:IE9をテストするための簡単なテストページを作成しました。確かに期待どおりに動作します。 これがソースです

もう一度更新:これは、別の質問で尋ねたズームの問題も解決します。

10
Sapph

CSSでは不可能です。
ただし、 Map Hilight jQueryプラグインをチェックしてみてください。

EDIT 10.2011
ImageMapster はより最近の、より強力なプラグインであり、チェックアウトする必要もあります。

16
Su'

いいえ、あなたが説明するようにこれを行う方法はありません。私はそれを調査し、試しました。できることは、さまざまなセグメントでマウスオーバーイベントを設定し、同じ領域でシェーディングされているオーバーレイ画像を交換することです。