jQuery RWD Image Mapsを使ってクリッカブルマップをレスポンシブ対応に！

公開日：2019/12/23

#jQuery #忘れがちメモ

jQuery RWD Image Mapsを使ってクリッカブルマップをレスポンシブ対応に！

最近では、クリッカブルマップを使うことは少なくなりました。スマホやタブレットが主流になってきたのも原因の一つですが、元々昔からあるものです。

ですが、サイト制作をする上で、稀に使用することもあります。そんなクリッカブルマップをレスポンシブ対応にすることで、今でも現役で使用することができます。

クリッカブルマップとは
jQuery RWD Image Mapsとは
jQuery RWD Image Mapsの設定方法

クリッカブルマップとは

これは画像やイラストの上に円や多角形エリアと設定し、リンクを付けるコーディング方法です。また、1枚の画像に対して複数のリンクを設置することができ、地図のイラストなどによく使われています。

ですが、コーディングする上でリンクエリアをpx単位で設定するため、レスポンシブのサイトだと、リンクの大きさや位置などが変化に耐えれません。

jQuery RWD Image Mapsとは

クリッカブルマップを簡単にレスポンシブに対応するためのプラグインです。設置方法も簡単で下記の内容をコピペするだけで使うことができます。

jQuery RWD Image Mapsのダウンロード先はこちら

jQuery RWD Image Mapsの設定方法

jQueryの設置

head内に下記のを記入する

<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>

$(document).ready(function(e) {

　$('img[usemap]').rwdImageMaps();

});

</script>

コードを設置

表示したい場所に下記のコードを設置する

<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>