スマホ対応(レスポンシブ)でイメージマップを使っても座標がずれない方法!

スマホ対応(レスポンシブ)でイメージマップを使っても座標がずれない方法!

スマホ対応でも、画像に対して範囲指定でリンクさせたいときに、
イメージマップでリンクさせたいときが、時たまあるんですが、

そんな時は、そのままだとスマホ表示した場合、
イメージマップのクリック範囲の大きさがそのまま変わらないので、大きいままでずれます。

ですが、
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>

ポチッ☆とクリックお願いします!
↓ ↓ ↓

  • にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

コメントは受け付けていません。

サブコンテンツ

TOP