クリッカブルマップをレスポンシブ対応させるプラグイン「Responsive Image Maps jQuery Plugin」

  • Posted on
  • Category : Tips
クリッカブルマップをレスポンシブ対応させるプラグイン「Responsive Image Maps jQuery Plugin」

クリッカブルマップ自体を最近ではほとんど使うことがないんですが、これは覚えておきたいと思うものがあったので備忘録兼ねて紹介します。

Responsive Image Maps jQuery Plugin

通常クリッカブルマップを使用する際は画像の左上を基準にして座標を指定するので、レスポンシブに対応して画像の拡大・縮小を行ってしまうと座標がずれてしまい、意図しない箇所にリンクが設定されるということになってしまいます。
そんなレスポンシブとクリッカブルマップを併用する場合に便利なのがこの「Responsive Image Maps jQuery Plugin」というjQueryプラグインで、これといった難しい記述もなく、通常と同じように指定してこのプラグインを使うだけで簡単にクリッカブルマップをレスポンシブに対応させることができます。

使用方法

Responsive Image Maps jQuery Plugin」からファイルをダウンロードし、jQueryとjquery.rwdImageMaps.js又はjquery.rwdImageMaps.min.jsを読み込ませた後、以下のようにそれぞれ記述します。

HTML

<img src="images/powerpuff-girls.fw.jpg" alt="Powerpuff Girls" width="1024" height="768" usemap="#powerpuffgirls"/>
<map name="powerpuffgirls">
	<area shape="poly" coords="571,101,563,83,562,66,549,80,541,96,537,112,536,128,537,141,531,141,508,141,508,141,511,133,517,126,533,114,500,111,476,111,452,114,438,118,424,124,410,131,400,140,392,152,390,167,391,174,394,183,400,191,409,198,391,215,379,234,371,252,368,271,367,277,368,298,371,316,381,338,396,358,414,375,399,378,387,385,379,393,377,405,378,412,382,418,388,424,395,429,411,434,425,435,431,446,439,456,459,474,480,488,502,500,514,507,523,515,528,523,530,534,529,541,526,547,515,562,532,556,548,547,562,536,574,523,583,508,590,490,594,470,596,448,596,430,591,410,587,398,599,390,613,382,628,371,643,356,657,337,666,313,669,299,670,284,669,276,668,264,670,263,697,263,704,261,711,257,716,251,719,243,718,236,715,231,706,221,694,215,683,213,677,213,670,215,664,220,656,232,645,215,652,206,657,199,660,191,662,181,660,169,655,158,648,150,638,142,617,130,596,120,582,112,571,101,571,101" href="#blossom" title="Blossom" alt="Blossom" />
</map>

HTMLはデモで使用されているものを引用しており、上記ソースでは画像真ん中にいるBlossomだけの記述部分を抜き出していますが複数でも問題ないです。
見ての通りHTMLは通常の指定と同様に記述するだけで特別な記述なども一切なく、これほど細かい指定であっても問題なく動作してくれます。
次にjQueryで以下を記述します。

jQuery

$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
});

この通りjQueryも非常にシンプルな記述のみです。
特定のものだけ有効化したい場合は、赤字部分をIDやクラス指定に変更してください。

プラグインの詳細やデモは以下より確認できます。
デモは実際にウィンドウを拡大縮小して確認するだけでなく、Firebugなどのツールを使用しながら見ると指定した箇所がどのように変化しているかわかりやすいです。

※このエントリーに使用している画像も、Firebugを使ってリンク領域が明示されたところをキャプチャしたものです。

Back to Top

クリッカブルマップをレスポンシブ対応させるプラグイン「Responsive Image Maps jQuery Plugin」

クリッカブルマップをレスポンシブ対応させるプラグイン「Responsive Image Maps jQuery Plugin」

/ Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。