The current article

レスポンシブデザインでクリッカブルマップ(イメージマップ)対応にするjQueryプラグイン

レスポンシブにすると画像の大きさが変わってしまって、クリッカブルマップ(イメージマップ)の座標がズレるってことになりますよね。
少し古いプラグインですが、そんな時に使えるレスポンシブに対応するクリッカブルマップjQueryプラグインをご紹介します。

capture

Responsive Image Maps jQuery Plugin

まず、stowball/jQuery-rwdImageMaps ・ GitHubにアクセスして、該当ファイルをダウンロードしてきます。
下図の丸印「ZIP」をクリックすると「jQuery-rwdImageMaps-master.zip」というフォルダがダウンロード出来ると思います。

で、フォルダを開いた中に「jquery.rwdImageMaps.min.js」ファイルがありますので、ご自分のサーバーにアップロードして下さい。

続いて、jquery本体と該当ファイルを読み込ませ、実行コードを追記します。
上記ファイルを「js」フォルダにアップロードした場合の記述例はこんな感じです。

<html>
  <head>
 ・
 ・
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>
    <script>
      $(document).ready(function(e) {
	    $('img[usemap]').rwdImageMaps();
      });
    </script>

 ・
  </head>
  <body>
  ・
  ・
  ・

後はクリッカブルマップを通常通り記述すればOKです!

ちなみにクリッカブルマップの記述例はこんな感じ。

・
・
<img src="powerpuff-girls.fw.jpg" width="1024" height="768" usemap="#powerpuffgirls" alt="" />
	<map id="powerpuffgirls" name="powerpuffgirls">
		<area shape="poly" coords="122,36,281,36,・・・" href="リンク先" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
		<area shape="poly" coords="864,668,912,650,・・・" href="リンク先" title="Cartoon Network" alt="Cartoon Network" />
		<area shape="poly" coords="1010,298,995,281,・・・" href="リンク先" title="Buttercup" alt="Buttercup" />
		<area shape="poly" coords="571,101,563,83,・・・" href="リンク先" title="Blossom" alt="Blossom" />
		<area shape="poly" coords="254,286,232,271,・・・" href="リンク先" title="Bubbles" alt="Bubbles" />
        </map>
・
・

画像を配置して、
3行目のように「usemap」に#(ハッシュ)をつけて名前を決め、
4行目のように「map」のidとnameに同じ名前を記述します。
(旧式のブラウザではname属性のみを認識しますが、XHTMLではid属性を使う事を推奨しており、idとnameを併記するようです)

ちなみに、5行目の「shape」内の「poly」は多角形の時、四角の場合は「rect」、円の場合は「circle」ですね。
その後の「coords」に座標を並べて・・・「href」にリンク先を記述する・・・んでしたね。
使わないと忘れます・・・

レスポンシブデザインでクリッカブルマップを使うことがあれば、このプラグインを使ってみてはいかがでしょうか。


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。