クリッカブルマップをレスポンシブ対応する機会があったので、jQueryプラグインの「jQuery RWD Image Maps」で対応してみました。
設定方法
GitHubのページからjsファイルを取得します。
jQueryと合わせて、以下のように読み込みます。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script>
次にクリッカブルマップの用意をします。
今回は以下のようにしました。
<div class="map-box">
<img src="image.jpg" alt="" usemap="#map" />
<map name="map">
<area shape="poly" coords="253,131,284,158,318,178,341,251,338,282,327,276,328,291,305,292,296,276,281,279,265,300,248,298,272,279,250,266,236,243,236,203,241,194,228,163,213,151,223,151,251,132" href="#" class="area">
<area shape="poly" coords="0,325,481,270,481,360,0,360" href="#" class="area">
</map>
</div>
imgにwidth: 100%;を設定しています。
最後にプラグインの設定をします。
$(function() {
$('img[usemap]').rwdImageMaps();
});
これでクリッカブルマップのレスポンシブ対応ができました。
クリッカブルマップのレスポンシブ対応のデモページ
【参考サイト】
はじめまして。おじゃましております。
クリッカブルマップ作ってくれと言われ、わかりましたと言ったものの、
考えてみたらレスポンシプじゃないのどうすんのよと困っておりました。
お陰さまで、本格的にお勉強したことのない私でもわかり易く、サクッと
実装できました、大変助かりました。
ありがとうございます!!
おばちゃまさん
コメントありがとうございます。
お役に立てたようでよかったです。