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アナリティクスタグは流用しないで下さい。