開始タグ

複雑なレイアウトをページに載せたい時は画像にして対応することが多いと思いますが、フロアマップなどの場合だとページ内リンクをつけることもあったので、今回メモ。

やりたいこと

・画像内の特定箇所にリンクを貼りたい
・レスポンシブしても同じ箇所（領域）にリンクを貼っておきたい。

方法

「クリッカブルマップ」と呼ばれるものを使います。
HTMLソースだとこんな感じ。

<figure><img src="asset/img/img_sample.jpg" alt="" usemap="#link"></figure>
<map name="link">
	<area shape="rect" coords="46,0,1034,456" href="#place01" alt="" />
</map>

仕組みとしては、紐付けした画像の上にareaタグで領域を指定してリンクを設定している、という感じ。

紐付けしているのは、
imgタグ=usemap属性
areaタグ=name属性（#は除く）
この各属性で共通の名前を指定することで、紐付けされます。

areaタグで指定しているshape="rect"は大雑把に言えば四角形であることを表しています。
coords属性では座標を指定しています。
4つの数字のうち、前半分が左上隅・後半分が右下隅の計２点の座標を指定することで領域が形成されます。
残りの属性はaタグやimgタグと同じです。

座標の指定は、流石にアナログだと手間がかかりすぎるので、
・Dream Weaverをお持ちであれば活用
・ない場合はHTML Imagemap Generatorを使うといいでしょう。
使い方も簡単で、画像をドラッグ＆ドロップしてシェイプを作るだけですので、自分もこれを使っています。

ふぅこれで完了と思いきや・・・areaタグは絶対的に領域位置を指定している状態ですので、レスポンシブ時には画像に合わせて領域も縮むようにはなりません。

ですので、JSプラグインを利用して対応します。

クリッカブルマップのレスポンシブ対応

以下のソースをhead内に記述します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.js"></script>
<script src="asset/js/rwdImageMaps.js"></script>

rwdImageMaps.js

$(function() {
	$('img[usemap]').rwdImageMaps();
});

プラグインファイルを読み込み、rwdImageMaps.js内の記述をしてあげれば、レスポンシブさせても画像の伸縮に合わせて領域も変わってくれます。

閉じタグ

結構単純と言うか簡単なことですが、知っているのと知らないのとでは全く違いますよね。
自分も最初はそうでした。
とはいえ「クリッカブルマップ」というワードさえ知っていればいくらでも検索すれば出てくるので、何かその他問題があれば調べてみてください。