jQuery RWD Image Mapsを使ってクリッカブルマップをレスポンシブ対応に!
最近では、クリッカブルマップを使うことは少なくなりました。スマホやタブレットが主流になってきたのも原因の一つですが、元々昔からあるものです。
ですが、サイト制作をする上で、稀に使用することもあります。そんなクリッカブルマップをレスポンシブ対応にすることで、今でも現役で使用することができます。
クリッカブルマップとは
これは画像やイラストの上に円や多角形エリアと設定し、リンクを付けるコーディング方法です。また、1枚の画像に対して複数のリンクを設置することができ、地図のイラストなどによく使われています。
ですが、コーディングする上でリンクエリアをpx単位で設定するため、レスポンシブのサイトだと、リンクの大きさや位置などが変化に耐えれません。
jQuery RWD Image Mapsとは
クリッカブルマップを簡単にレスポンシブに対応するためのプラグインです。設置方法も簡単で下記の内容をコピペするだけで使うことができます。
jQuery RWD Image Mapsのダウンロード先はこちら
jQuery RWD Image Mapsの設定方法
jQueryの設置
head内に下記のを記入する
1 2 3 4 5 6 7 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> <script> $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); }); </script> |
コードを設置
表示したい場所に下記のコードを設置する
1 2 3 4 5 6 7 8 9 10 |
<div class="box"> <img src="./img/map.png" alt="表示画像" usemap="#in-map"> <map name="in-map"> <area shape="rect" coords="135,110,351,148" href="#リンクURL" alt="リンク01"> <area shape="rect" coords="495,50,711,88" href="#リンクURL" alt="リンク02"> <area shape="rect" coords="495,143,711,181" href="#リンクURL" alt="リンク03"> <area shape="rect" coords="28,291,244,329" href="#リンクURL" alt="リンク04"> <area shape="rect" coords="28,335,244,373" href="#リンクURL" alt="リンク05"> </map> </div> |
上記のコードは見本になるので、自身のサイトに合うように書き換えて使用するようにしてください。
これでクリッカブルマップをレスポンシブ対応にすることができます。
クリッカブルマップは、あまり使う頻度は多くありませんが、いざ使用する際にレスポンシブ対応にする方法を探している方は是非、参考にしてみてください。