牧野です。

なんとなく面白いものに出くわしたので、紹介したいと思います。
画像のある範囲をクリックした時にリンク先へジャンプする<area>タグですが、画像中の座標などを指定して、選択範囲を指定する必要があります。

簡単なものならhtml Imagemap generator (http://labs.d-s-b.jp/ImagemapGenerator/)　などがありますが、もっと精確にDream Weaverでイメージマップを作成できるので、やり方をご紹介したいと思います。

Dreamweaverでイメージマップ

今回使用するソフトはDreamweaverですが、ツールとして用意されている多角形機能を使用します。
［ツール］から挿入を選んで、imgタグと挿入する画像を選択します。
［ウインドウ］から［プロパティ］を選択してツールボックスを表示させます。（右下のタグにあるimgタグをクリックしておいてください）

［プロパティ］の中にある、多角形ツールを選択して、リンクの範囲を選択しておきます。すると、選択部分が青く表示されるので、この部分がリンク先への部分となります。

上記のツールバーにある分割を選んで、コードビューを開いて、<map>や<area>などのタグを含めて、コピペすれば、他のファイルにも応用できます。

必要に応じてリンク先やalt属性は変更してください。

下の画像のいちごとコーヒー部分にリンクを付与していますので、クリックするとリンク先へのジャンプが実行されます。

↓写真中のいちごかコーヒーをクリックしてみてください。

（いちご→このページの一番上に移動します。コーヒー→前のこのセクションの見出し部分へ移動します。）

日本地図などの地方、都道府県の矩形や例でいうと、いちごやカップなどの複雑な形をなぞらえることができるので、視覚的にもリンク先を指定しやすくすることができます。

レスポンシブにも対応

jsのライブラリーにjQuery RWD Image mapがあります。これを同ファイルに読み込ませて、jqueryでimgのセレクタを指定し、rwdImagemap()を適応させるとレスポンシブにも対応したイメージマップを作成することができます。ただし、元々の画像の比率を変更しないことが条件で、もし変更したければ、新たにイメージマップを作成して、適応させる必要があるので、注意が必要です。

最後に

便利で、ユーザー目線なリンク先を作れることが魅力です。ぜひ、いろんなリンクを作ってみてください笑。