最近なにかとレスポンシブデザインで作成する案件が増えてきました。
その際、クリッカブル・マップを使う箇所が出た際、
普通に area を作ってしまうと、
画像を可変してもその coords ポイントは書き替わらないので、
マップしたものがズレてしまいます。
そこで、jQueryプラグインを使用します。
使用方法は簡単で、jQuery と ダウンロードしたファイルを読込み、
実行関数を記述するだけです。
<script src="jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
クリッカブル・マップは、オリジナルの画像サイズで作成し、
その後CSS等で、img タグに対して100％なり可変するように変更いたします。
始めに100％指定してから、クリッカブル・マップを作ってしまうと、
可変した際、正確なエリアとはなりませんので、ご注意ください。
2015年11月5日 追記
まず、スクリプトや要素にサイズ指定をしない状態で、
HTMLに画像を設置し、クリッカブル・マップを作成してください。
クリックエリアが出来た後、スクリプトファイルを追記し、
画像に対して、可変するよう widthに％指定を記述してください。
コメント
「クリッカブル・マップは、オリジナルの画像サイズで作成し、
その後CSS等で、img タグに対して100％なり可変するように変更いたします。
始めに100％指定してから、クリッカブル・マップを作ってしまうと、
可変した際、正確なエリアとはなりませんので、ご注意ください。」
について、もう少し初心者向きのご説明をいただけると助かります。
うまくできない理由がここにあるような気がいたします。
追加で失礼します。
多くのサイトで、ファイル読み込み・実行関数の記述はタグ内に書くよう説明が
ございますが、当方の使用しているシステム（Eストア・ショップサーブ）では、
スマホサイトのタグ内を編集することができません。内に記述することは
できますでしょうか。これも、うまくできない理由の一つかと考えておりましたが、
ジャバスクリプトはどこに記述してもよいと説明しているサイトもあり、混乱しております。
肝心の言葉が削除されたので再度記述します。
多くのサイトで、ファイル読み込み・実行関数の記述は＜ヘッド＞タグ内に書くよう説明が
ございますが、当方の使用しているシステム（Eストア・ショップサーブ）では、
スマホサイトのタグ内を編集することができません。＜ボディー＞タグ内に記述することは
できますでしょうか。これも、うまくできない理由の一つかと考えておりましたが、
ジャバスクリプトはどこに記述してもよいと説明しているサイトもあり、混乱しております。
<script>タグに関しては、<head>内に必ずしも入れないといけないわけではありません。
ソースの前後に記述しても問題なく動くと思います。
ps.レンダリングに影響のないスクリプトファイルなどは、</body>直前に入れると体感速度を早くできる場合があります。
ご指摘ありがとうございます。
初心者向きかどうはわかりませんが、実装手順を追記してみました。