Maps」を利用すれば、簡単にイメージマップリンクをレスポンシブ対応させることができます。以下のように100×100のサイズの画像「sample.jpg」に対してイメージマップを用意します。coords="60,60,80,80,70,90"></map>画像に対して、四角形のリンク、円形のリンク、多角形のリンクの3つのエリアを設定しています。通常だと、これをレスポンシブ対応のサイトに設置し、画面の大きさに応じて画像サイズを拡縮した場合、イメージマップのリンクエリアがズレてしまいます。このような場合に、以下のプラグインを導入することで、簡単にイメージマップをレスポンシブ対応することができます。Plugin導入方法は簡単です。jQueryを読み込んだ後に、上記のGitHubからダウンロードしたプラグインを読み込みます。src="js/jquery.rwdImageMaps.min.js"></script>次にusemap属性を持っている要素に対して、プラグインを実行します。<script>$(document).ready(function(){$('img[usemap]').rwdImageMaps();});</script>これだけで完了です。以下の公式サンプルを見てもらうと分かるように、非常に複雑なマップでも対応可能です。ブラウザのサイズを変更してみて、クリッカブルエリアがフレキシブルになっていることを確認してみましょう。Pluginちなみに、マップの座標の指定方法ですが、画像のオリジナルサイズに対して座標を指定すればよいです。本書は、実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「JavaScriptを利用するWebプログラマ必携の逆引き集」です。JavaScript(ECMAScript)の基本構文や新記法といった基礎的な知識から、オブジェクト指向、組み込みオブジェクト、関数、オブジェクト指向構文、DOM、ブラウザーオブジェクトなどの定石・応用テクニック、開発に役立つツール類まで、著者の経験に基づいた実践の場で必ず役立つノウハウ、レシピを提供します。JavaScriptをいまいち使いこなせていないと感じる方や中級レベルに向けてしっかり足場固めをしたい方、JavaScriptをもっと活用したい方などにおすすめの一冊です。アスキー・メディアワークスWeb制作に必要なjQueryの使い方を効率よくしっかり学べる。2.0など最新のトレンドにも対応。サンプルを100本超提供。1.9対応特製チートシート付き。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。