jquery.rwdImageMaps.jsを使って画像のmapタグ(クリッカブルマップ)を自動調整でレスポンシブ対応する方法をご紹介します。
Contents
ディスプレイ広告
jquery.rwdImageMaps.jsを使って画像のmapタグ(クリッカブルマップ)を自動調整でレスポンシブ対応するCSS記述
※mapタグを設定する画像(img[usemap])のCSS記述です。必要に応じて変更して下さい。
<style> body { font-size: 18px; text-align: center; line-height: 1.8em; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; } p{ padding-bottom: 10px; } img[usemap] { border: none; height: auto; max-width: 100%; width: auto; } </style>
jquery.rwdImageMaps.jsを使って画像のmapタグ(クリッカブルマップ)を自動調整でレスポンシブ対応するHTMLの記述
※mapタグを設定する画像(logo1.jp)を用意します。用意した画像(logo1.jp)内の文字(「D」と「U」)にmapタグ設定し各areaタグのalt属性に文字を設定します。
<h1>jquery.rwdImageMaps.jsを使って画像のmapタグ(クリッカブルマップ)を自動調整でレスポンシブ対応します。</h1> <p>以下の画像の「D」と「U」文字にmapタグ(クリッカブルマップ)を設定してます。<br>「D」と「U」をクリックすると各altに設定している文字をalertメッセージで表示します。<br>ブラウザ幅を拡大・縮小させてクリックしてみて下さい。</p> <img src="logo1.jpg" usemap="#logo" alt="" /> <map name="logo"> <area shape="rect" coords="131,236,347,506" href="./" alt="「D」をクリックしました。"> <area shape="rect" coords="401,235,622,512" href="./" alt="「U」をクリックしました。"> </map>
jquery.rwdImageMaps.jsを使って画像のmapタグ(クリッカブルマップ)を自動調整でレスポンシブ対応するJavaScriptの記述
※jquery.min.js(v1.10.2)、jquery.rwdImageMaps.min.jsファイルを読み込みます。$(‘画像エリア’).rwdImageMaps()を記述します。mapタグに設定した各areaタグをクリックするとalt属性に文字をalertメッセージで表示する処理です。
<script src="jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> <script> $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); $('area').on('click', function() { alert($(this).attr('alt') + ' clicked'); }); }); </script>
jquery.rwdImageMaps.jsを使って画像のmapタグ(クリッカブルマップ)を自動調整でレスポンシブ対応するデモページ
jquery.rwdImageMaps.jsを使って画像のmapタグ(クリッカブルマップ)を自動調整でレスポンシブ対応するデモページ
ソース元:jQuery-rwdImageMaps
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。