画像に複数リンクを設定するクリッカブルマップ（イメージマップ）

よこのじ（@yokonoji_work）です。

クラウドワークスにて、1つの画像に複数のリンクを設定したいとのご要望をいただきました。そういう画像を見たことはありましたが、自分でやったことはなかったので実装した内容をご紹介します。

クリッカブルマップ（イメージマップ）とは？

クリッカブルマップ（イメージマップ）とは？これはどんなものか見ていただくのが早そうです。

この画像の札幌、青森の文字にリンクを置いています（北海道、青森のwikiに飛びます）。このように1つの画像に複数のリンク先を指定できる機能がクリッカブルマップ（イメージマップ）です。

実装方法

先ほどの日本地図を例にWordPressでも実装できる形でご紹介します。

画像の表示とリンク場所の指定はこのような記述で行っています。

これはimg、map、area要素を組み合わせたものです。画像を表示させて、座標指定で長方形のリンクスペースを設置しています。

座標計算して記述する必要はありませんよ。こちらのHTML Imagemap Generatorを利用すれば、マウスでリンクを設置したい箇所を指定できます。

ここまでで、クリッカブルマップ（イメージマップ）は完成しています。しかし、座標指定のため画像サイズが変わった場合は画像とリンク座標がずれてしまいます。

例えば、スマートフォンで見るときはもちろんずれますし、WordPressの記事エリアが画像より狭いと画像が縮小されて、座標がずれてしまいます。

これを防ぐためにこちらのJavaScript（jQuery）の処理を追加します。
stowball/jQuery-rwdImageMaps

このスクリプト処理により、画像の縮小・拡大に合わせて座標位置が調整されますので、スマートフォンでも座標のずれはおきません。

jQueryですので、Google Hosted LibrariesよりjQueryのコードを読み込んでいます（既に別の箇所でjQueryを読み込んでいれば不要です）。

今回はWordPressで使えるようにということで、jquery.rwdImageMaps.min.jsをアップロードしてからそのURLでファイル指定しています。また、WordPressではjQuery処理の先頭に$を付けていると動きませんのでjQueryに置き換えています。

最後にhtmlとJavaScript（jQuery）のコードを記事作成時にテキストタブで貼り付ければOKです。