クリッカブルマップをレスポンシブ対応するプラグイン「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();
});

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

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

2件のコメント

  1. おばちゃま より:

    はじめまして。おじゃましております。

    クリッカブルマップ作ってくれと言われ、わかりましたと言ったものの、
    考えてみたらレスポンシプじゃないのどうすんのよと困っておりました。

    お陰さまで、本格的にお勉強したことのない私でもわかり易く、サクッと
    実装できました、大変助かりました。
    ありがとうございます!!

    • cly7796.net より:

      おばちゃまさん
      コメントありがとうございます。
      お役に立てたようでよかったです。

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年12月
1234567
891011121314
15161718192021
22232425262728
293031