takato（@n8takato）です！
クリッカブルマップでレスポンシブ対応したい
この記事では上記の課題を解決します。
web制作をしていると、クリッカブルマップを導入する機会があります。
スマホで見ても座標が崩れないように、レスポンシブ対応をする必要があります。
クリッカブルマップのレスポンシブ対応は簡単に行うことができます。
この記事では、クリッカブルマップのレスポンシブ対応について説明します。
この記事でわかること
- クリッカブルマップのレスポンシブ対応の方法
この記事を書いた人
- 26歳
- 男性
- 都内制作会社に勤めるwebデザイナー
- 法人営業職→未経験でwebデザイナーに転職
クリッカブルマップをレスポンシブ対応する方法
早速、クリッカブルマップをレスポンシブに対応させる方法を紹介します。
レスポンシブに対応させる手順は下記の通りです。
レスポンシブ対応させる手順
- jQueryの導入
- JavaScriptのコード記入
- 座標を取得する
jQueryの導入
まずはjQueryを導入します。
jQueryの導入は、HTMLファイルの<head></head>内に下記のコードをコピペすれば完成です。
<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>上記2行をコピペしましょう。
JavaScriptのコード記入
続いて、JavaScriptのコードを入力します。こちらもコピペで大丈夫です。
下記のコードをHTMLの一番下にコピペしてください。
<script>
$('img[usemap]').rwdImageMaps();
</script>上記のコードをコピペしたら、レスポンシブの対応は完了です。
座標を取得する
あとは、従来通り座標を取得してクリッカブルマップを作成します。
座標の取得方法
座標の取得は、下記のツールで簡単に行うことが出来ます。
上記のツールは下記の手順で使用出来ます。
使用手順
- ツール内に画像を挿入する
- リンクを挿入したい箇所を図形で囲う
- 右側に表示されるコードをコピペする
座標のコードは、このツールを使用することで簡単に取得出来ます。
クリッカブルマップの座標がズレる？
ここからはクリッカブルマップの座標がズレてしまう原因を紹介します。
クリッカブルマップがズレる原因
- 全て同じnameで作成している
全て同じnameで作成している
1つのサイト上に複数のクリッカブルマップを作成する場合、全て同じnameで作成しているとズレてしまいます。
ズレてしまう例
<img src='images/test01' usemap="#ImageMap" alt=""/>
<map name="ImageMap">
<area shape="rect" coords="45,584,557,856" href="https://youtu.be/mkV0jqICfLA" alt="" />
</map>
<img src='images/test02' usemap="#ImageMap" alt=""/>
<map name="ImageMap">
<area shape="rect" coords="45,584,557,856" href="https://youtu.be/mkV0jqICfLA" alt="" />
</map>
<img src='images/test03' usemap="#ImageMap" alt=""/>
<map name="ImageMap">
<area shape="rect" coords="45,584,557,856" href="https://youtu.be/mkV0jqICfLA" alt="" />
</map>上記の場合、2つ目以降のクリッカブルマップがズレてしまいます。
- 原因は、「map name」の名前を変えていないからです
ズレない例
<img src='images/test01' usemap="#ImageMap01" alt=""/>
<map name="ImageMap01">
<area shape="rect" coords="45,584,557,856" href="https://youtu.be/mkV0jqICfLA" alt="" />
</map>
<img src='images/test02' usemap="#ImageMap02" alt=""/>
<map name="ImageMap02">
<area shape="rect" coords="45,584,557,856" href="https://youtu.be/mkV0jqICfLA" alt="" />
</map>
<img src='images/test03' usemap="#ImageMap03" alt=""/>
<map name="ImageMap03">
<area shape="rect" coords="45,584,557,856" href="https://youtu.be/mkV0jqICfLA" alt="" />
</map>上記のように「name」の値をそれぞれ異なるものにすることで、座標のズレがなくなります。
もし座標がズレてしまうという方は、同じnameを使用していないか確認してみてください。
【最後に】jQueryでレスポンシブ対応しよう！
この記事では、クリッカブルマップをレスポンシブ対応させる方法を説明しました。
クライアントの業界によってはクリッカブルマップの制作を依頼されます。（不動産は多い）
制作する際は必ずレスポンシブに対応するようにしてください。