[JS]Responsiveデザインでサイズ可変の画像でもクリッカブルマップ対応にするスクリプト -RWD Image Maps

実装も簡単で超軽量、Responsiveデザインで画像のサイズが変わってもクリッカブルマップの座標を計算しなおすjQueryのプラグインを紹介します。

RWD Image Maps -GitHub

[ad#ad-2]

• RWD Image Mapsのデモ
• RWD Image Mapsの使い方

RWD Image Mapsのデモ

デモでは左上のロゴ、バブルス、ブロッサム、バターカップにクリッカブルマップが仕込まれています。

デモページ：幅1200pxで表示

表示サイズを変更すると、画像のサイズもそれに合わせて変更され、クリッカブルマップも適した位置になります。

デモページ：幅480pxで表示

[ad#ad-2]

RWD Image Mapsの使い方

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>

HTML

HTMLはクリッカブルマップを通常通り記述するだけです。

<img src="powerpuff-girls.fw.jpg" width="1024" height="768" usemap="#powerpuffgirls" alt="" />
<map name="powerpuffgirls">
	<area shape="poly" coords="122,36,281,36,285,37,287,39,289,42,289,47,289,48,278,77,276,81,274,84,271,85,218,85,218,90,210,90,208,95,207,99,204,100,72,100,26,87,23,84,20,81,19,76,35,40,37,38,43,35,62,35,65,30,68,26,72,25,115,25,119,27,121,30,122,36,122,36" href="#ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
	<area .../>
</map>

JavaScript

適用するクリッカブルマップをjQueryのセレクタで指定し、スクリプトを実行します。

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