• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2015/10/29

レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」

レスポンシブサイトでクリッカブルマップ業務メモ。

最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ
画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。

jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。

使い方

使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。

HTML

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
<script>
$(function(){
  $('img[usemap]').rwdImageMaps();
});
</script>

上のように、jQuery本体とrwdImageMaps.jsを読み込んで、スクリプトを実行。

あとはふつうにimg要素にクリッカブルマップを設定するだけ。あな簡単し。
挙動はデモページをごらんくださいませ。

レスポンシブウェブデザインのサイトを作成時にクリッカブルマップを盛り込まなければいけない事案が発生したらどうぞ。

stowball/jQuery-rwdImageMaps

こんな記事もオススメです
SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×