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」にリンク先を記述する・・・んでしたね。
使わないと忘れます・・・
レスポンシブデザインでクリッカブルマップを使うことがあれば、このプラグインを使ってみてはいかがでしょうか。
関連記事
