こんにちは、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/へリンク
レスポンシブ化させたい！
さて、これでイメージマップ自体は用意できたのですが、ここで１つ問題があります。
それは、このままブラウザ幅を拡大縮小すると、イメージマップが崩れてしまう、ということです。
例えばスマホの場合、パソコンと比べて画面幅が小さくなるため、必然的に画像サイズは縮小されてしまいます。しかし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を使ってみてください！
