ホームページ制作会社エスエムティのスタッフブログ

Staff blog

エスエムティの愉快な仲間たち

記事担当
ぴのこ

rwdImageMaps

以前も紹介したような気がしますが、
最近また使用して改めて便利だったのでご紹介。

◆rwdImageMaps
https://github.com/stowball/jQuery-rwdImageMaps

画像の一部にリンクを張るクリッカブルマップですが、
スマホやタブレット等、画像が可変になる場合には
対応するとこが出来ませんでした。

クリッカブルマップは、
画像の左上からの座標を基準にエリアを指定するので
画像の幅が可変するレスポンシブデザインだと
どうしてもずれてしまうんですよね。

そんな時に使用するのがこの「rwdImageMaps」。

「jquery.rwdImageMaps.min.js」をダウンロードして
jQueryと一緒に読み込むだけ。

あとは通常通りにクリッカブルマップを設定してください。

画像のサイズが変わる度に、javascriptで座標を取得しなおしてくれます。

昔からある有名なスクリプトですが、未だに現役で助かります。

ぴの子

クリックしていただけると幸いです

http://www.smt-net.co.jp/


ページの先頭へ戻る

ページの先頭へ戻る

お問合せ

キャンペーン

pay-per-click