こんにちは、WEBデザイナーのねこふらいです。


先日「イメージマップは実際の画像サイズじゃないと使えないのですか?」と訊かれました。スマホなどで閲覧すると画面幅が小さくなるので、当然画像サイズは変わってしまいます。

しかし、area要素のサイズは変わらず、ブラウザを拡大縮小するとイメージマップが崩れてしまう、という事態になってしまいます。

そこで今回はイメージマップを各デバイスでも正常に表示されるよう、レスポンシブ対応させてみたいと思います!

イメージマップの作り方のおさらい

まずはイメージマップを準備しないといけませんね。

イメージマップは『HTML Imagemap Generator』さんを使えば簡単に作成できます。

作成手順は過去記事『HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法』を参考にしてください!


今回はこのようなイメージマップを用意しました。

詳しくはこちら  HTML Imagemap Generator

レスポンシブ化させたい!

さて、これでイメージマップ自体は用意できたのですが、ここで1つ問題があります。

それは、このままブラウザ幅を拡大縮小すると、イメージマップが崩れてしまう、ということです。


例えばスマホの場合、パソコンと比べて画面幅が小さくなるため、必然的に画像サイズは縮小されてしまいます。しかしarea要素のサイズはそのままになるため、リンク箇所がずれてしまうのです。逆もまた然り。

このままではユーザーに優しくありませんね!

そこで、どの端末から見てもイメージマップが正常に表示されるように、レスポンシブ対応させなければいけません!

では早速その方法を見ていきましょう。

jQuery RWD Image Mapsを使おう

イメージマップをレスポンシブ対応させる、もっとも簡単な方法は、jQueryプラグイン『jQuery RWD Image Maps』を使用することです。

これを導入すると、たった1行でレスポンシブ対応が出来ます。

以下のサイトからファイルをダウンロードしましょう。

jQuery RWD Image Mapsのダウンロード

サンプルコード

では早速コードを見てみましょう。

まずは全体コードです。

<!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://neco-fly.com/" alt="" />
        <area shape="circle" coords="402,172,83" href="https://neco-fly.com/about/" alt="" />
        <area shape="circle" coords="645,172,83" href="https://neco-fly.com/service/" 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://neco-fly.com/" alt="" />
    <area shape="circle" coords="402,172,83" href="https://neco-fly.com/about/" alt="" />
    <area shape="circle" coords="645,172,83" href="https://neco-fly.com/service/" alt="" />
</map>

この時、usemap属性の値を次のステップで使いますので、控えておきましょう。

ステップ3:JavaScriptコードの記述

最後にスクリプトJSコードを記述します。

<script>
    $('img[usemap]').rwdImageMaps();
</script>

まとめ

以上でイメージマップのレスポンシブ対応は完了です!

簡単に実装できますので、イメージマップの導入をお考えの方は、是非jQuery RWD Image Mapsを使ってみてください!

デモはこちら

HOME > コーディング > イメージマップをレスポンシブ対応させる簡単3ステップ!