スマホ対応(レスポンシブ)でイメージマップを使っても座標がずれない方法!
スマホ対応でも、画像に対して範囲指定でリンクさせたいときに、
イメージマップでリンクさせたいときが、時たまあるんですが、
そんな時は、そのままだとスマホ表示した場合、
イメージマップのクリック範囲の大きさがそのまま変わらないので、大きいままでずれます。
ですが、
jQuery-rwdImageMaps-master.js を使えば、
超簡単!
一瞬で実現可能です!
以下のURLの右の方にダウンロードボタンがあるので、Zipファイルをダウンロード!
https://github.com/stowball/jQuery-rwdImageMaps
●次にダウンロードした、フォルダの中から、
jquery.rwdImageMaps.min.js だけを
jsフォルダなどにアップします。
●更に、headerでそのjsを読み込む記述をします。
WPの場合だと、こんな感じ↓
<?php wp_enqueue_script('jquery.rwdImageMaps.min', get_bloginfo('template_url').'/js/jquery.rwdImageMaps.min.js'); ?>
●あとは、イメージマップを実行させたい(記述している)前に、
以下の実行文を記載すればOK!
<script> $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); }); </script>
関連記事はこちら!
スポンサーリンク