image - 洗練された HTML5 イメージ マップ?

Question

私が取り組んでいる新しいサイトのメニューに変えているリビング ルームのイメージがあります。アイデアは、椅子、机、ソファなど、部屋の特定のアイテムをクリックして、目的のページに移動できるということです。これを行う賢い方法があるかどうか疑問に思っています。アイテムは単純な形状ではないため、標準的なイメージ マップは使用したくありません。

助けてくれてありがとう！

Answer 1

Google検索でここにたどり着いたのでお答えします...

あなたがツールを求めたので：

GIMPには本当に優れたイメージマップ作成機能があります。

GIMP で画像を開き、[フィルター] > [Web] > [ImageMap] を選択します。

そこから、画像を描画してイメージ マップを作成できます。保存すると、必要に応じて調整できる HTML が生成されます。

Answer 2

Korvin が述べたように、SVG でこれを行うのがおそらく最も簡単なオプションです。イベントをリッスンする特定の領域を手動で指定するのではなく、SVG でイベントをオブジェクトにアタッチできるからです。

このルートに進む場合は、RaphaelJS ライブラリを使用することをお勧めします。これは、優れた構文とバージョン 9 より前の IE で動作するという利点があります。これは、onclick の代わりに onmouseover を使用するデモですが、あなたがしているものに近いかもしれません。達成しようとしています：

http://raphaeljs.com/australia.html

Answer 3

このツールはしっかりしたイメージ マッパーのようです: http://www.image-maps.com/ キャンバスと SVG でこれを行うことをお勧めします。