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

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

デモのキャプチャ

RWD Image Maps -GitHub

RWD Image Mapsのデモ

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

デモのキャプチャ

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

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

デモのキャプチャ

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

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>

top of page

©2017 coliss