こんにちは、MIO webデザインです。
先日「イメージマップは実際の画像サイズじゃないと使えないのですか?」と訊かれました。スマホなどで閲覧すると画面幅が小さくなるので、当然画像サイズは変わってしまいます。
しかし、area要素のサイズは変わらず、ブラウザを拡大縮小するとイメージマップが崩れてしまう、という事態になってしまいます。
そこで今回はイメージマップを各デバイスでも正常に表示されるよう、レスポンシブ対応させてみたいと思います。
イメージマップの作り方のおさらい
まずはイメージマップを準備しないといけませんね。
イメージマップは『HTML Imagemap Generator』さんを使えば簡単に作成できます。
作成手順は過去記事『HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法』を参考にしてください!
今回はこのようなイメージマップを用意しました。

- 前回作成したイメージマップにリンクを追加
- ページAへ移動→https://mio-code.com/へリンク
- ページBへ移動→https://mio-code.com/price/へリンク
- ページCへ移動→https://mio-code.com/contact/へリンク
レスポンシブ化させたい!
さて、これでイメージマップ自体は用意できたのですが、ここで1つ問題があります。
それは、このままブラウザ幅を拡大縮小すると、イメージマップが崩れてしまう、ということです。
例えばスマホの場合、パソコンと比べて画面幅が小さくなるため、必然的に画像サイズは縮小されてしまいます。しかしarea要素のサイズはそのままになるため、リンク箇所がずれてしまうのです。逆もまた然り。

このままではユーザーに優しくありませんね!
そこで、どの端末から見てもイメージマップが正常に表示されるように、レスポンシブ対応させなければいけません!
では早速その方法を見ていきましょう。
jQuery RWD Image Mapsを使おう
イメージマップをレスポンシブ対応させる、もっとも簡単な方法は、jQueryプラグイン『jQuery RWD Image Maps』を使用することです。
これを導入すると、たった1行でレスポンシブ対応が出来ます。
以下のサイトからファイルをダウンロードしましょう。
サンプルコード
では早速コードを見てみましょう。
まずは全体コードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イメージマップをレスポンシブに対応させてみよう!</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
height: auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
</head>
<body>
<img src="i16.jpg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
<area shape="circle" coords="158,172,83" href="https://mio-code.com/" alt="" />
<area shape="circle" coords="402,172,83" href="https://mio-code.com/price/" alt="" />
<area shape="circle" coords="645,172,83" href="https://mio-code.com/contact/" alt="" />
</map>
<script>
$('img[usemap]').rwdImageMaps();
</script>
</body>
</html>
かなり短いコードでレスポンシブ化できます。
3つに分けて解説していきます!
ステップ1:jQueryプラグインの読み込み
まずはjQueryとjQuery RWD Image Mapsを読み込みましょう。
ここではCDNで読み込んでいます。
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
また、CSSでimg要素の幅を100%にしておきましょう。
<style>
html,
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
height: auto;
}
</style>
ステップ2:イメージマップの実装
次に『HTML Imagemap Generator』さんで作成したイメージマップのコードを記述しましょう。
<img src="i16.jpg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
<area shape="circle" coords="158,172,83" href="https://mio-code.com/" alt="" />
<area shape="circle" coords="402,172,83" href="https://mio-code.com/price/" alt="" />
<area shape="circle" coords="645,172,83" href="https://mio-code.com/contact/" alt="" />
</map>
この時、usemap属性の値を次のステップで使いますので、控えておきましょう。
ステップ3:JavaScriptコードの記述
最後にスクリプトJSコードを記述します。
<script>
$('img[usemap]').rwdImageMaps();
</script>
まとめ
以上でイメージマップのレスポンシブ対応は完了です!
簡単に実装できますので、イメージマップの導入をお考えの方は、是非jQuery RWD Image Mapsを使ってみてください!