クリッカブルマップ・イメージマップのレスポンシブ対応
随分以前からある技術クリッカブルマップ・イメージマップを実装する機会があり、レスポンシブ対応もしたので、ご紹介します。
レスポンシブ対応はびっくりするくらい簡単なので、初級者の方でも実装が可能だと思います。
クリッカブルマップ・イメージマップの問題点
最近はクリッカブルマップ・イメージマップの実装はあまり見かけなくなりましたが、地図に対してクリックできるエリアを自由に設定したい時やキャラクター画像の形でクリックさせたい時など、凝ったデザインにも対応が可能なため、意外と用途は広いと思います。
HTMLのみで対応できる手軽さもいいですよね。
しかし実装方法としては、画像に対して絶対的な座標で指定するため、画像のサイズが可変するレスポンシブにはそのままでは使えません。
画像の左上から52,98の座標より、画像の左上から584,603の座標のポイントで、矩形を指定します。
座標は画像の左上から絶対値での指定なため、何もしなければレスポンシブなどの画像の横幅の変動に連動しません。
jQuery RWD Image Maps を使う
絶対値をいい感じに変更させるにはJavaScriptを利用することが思いつきますが、自前で実装するのは面倒だし手間がかかります。
そんな問題に対してぴったりなjQueryプラグインがあります！
ライセンスはMITなので、商用利用など比較的自由に使えるのも嬉しいポイント。
jQuery RWD Image Maps の使い方
GitHubよりjQuery RWD Image Mapsをダウンロードしましょう。
jquery.rwdImageMaps.js
jquery.rwdImageMaps.min.js
2つあるうち、改行やスペース等がない容量軽減版の「min」と付いている方を利用しましょう。
jQueryプラグインなので、当然ながらjQueryの読み込みを最初にする必要があります。
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>jQueryをGoogleのCDNを使って読み込む場合はこちら。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>jQuery RWD Image Maps のマニュアルに記載の通り、以下の記述で実行します。
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});ヘッダーやフッターなどで共通として記述していれば、usemap属性が付与されたすべてのimgが対象になるため、サイト内のすべてのクリッカブルマップ・イメージマップがレスポンシブ対応となります。