サイト制作に関するメモ書き

HOME > JavaScript > jQuery > クリッカブルマップをレスポンシブ対応するプラグイン「jQuery RWD Image Maps」を使ってみる

クリッカブルマップをレスポンシブ対応するプラグイン「jQuery RWD Image Maps」を使ってみる

クリッカブルマップをレスポンシブ対応する機会があったので、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();
});

これでクリッカブルマップのレスポンシブ対応ができました。
クリッカブルマップのレスポンシブ対応のデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP