レスポンシブに対応したロールオーバするクリティカルマップリンクを作成したところ。
スマホのブラウザ、SafariやChromeで閲覧した際、そのマップリンクを踏んで元いたページに戻ると
そのクリティカルマップの画像ごと消えてしまう現象がおきてしまいました。
リロードすればまた、表示はされますが戻って際必ずリンク切れのように小さな四角になってしまいます。
PCブラウザではそのようなことはありません。また同一ページのリンクではそのようなことはありません。
戻ってきた際にどうしたら、画像が表示されたままにできるのでしょうか?
HTML <script> jQuery(document).ready(function(e) {jQuery('img[usemap]').rwdImageMaps();}); </script> <div class="clickablemap"> <p><img src="<?php echo get_template_directory_uri(); ?>/img/3tutomoe.png" alt="" usemap="#c_map" id="c_map"></p> <map name="c_map"> <area shape="circle" coords="183,180,142" href="<?php echo home_url('/tag/heart'); ?>" alt="" id="link1"> <area shape="circle" coords="421,180,146" href="<?php echo home_url('/tag/soul'); ?>" alt="" id="link2"> <area shape="circle" coords="301,380,143" href="<?php echo home_url('/tag/health'); ?>" alt="" id="link3"> </map> </div>
JavaScriot var mapimg = new Array(4); mapimg[0] = 'フルパス/img/3tutomoe.png'; mapimg[1] = 'フルパス/img/3tutomoe01.png'; mapimg[2] = 'フルパス/img/3tutomoe02.png'; mapimg[3] = 'フルパス/img/3tutomoe03.png'; function mapover() { document.getElementById('link1').onmouseover = function() { document.getElementById('c_map').src = mapimg[1]; } document.getElementById('link1').onmouseout = function() { document.getElementById('c_map').src = mapimg[0]; } document.getElementById('link2').onmouseover = function() { document.getElementById('c_map').src = mapimg[2]; } document.getElementById('link2').onmouseout = function() { document.getElementById('c_map').src = mapimg[0]; } document.getElementById('link3').onmouseover = function() { document.getElementById('c_map').src = mapimg[3]; } document.getElementById('link3').onmouseout = function() { document.getElementById('c_map').src = mapimg[0]; } } if(window.addEventListener) { window.addEventListener("load",mapover,false); } else if(window.attachEvent) { window.attachEvent("onload",mapover); }
ロールオーバーはこのやりかたです。
https://www.webdlab.com/labs/clickablemap/
JavaScriptでロールオーバーするクリッカブルマップ
レスポンシブはこのやりかたです。
https://github.com/stowball/jQuery-rwdImageMaps
jQuery RWD Image Maps
回答2件
あなたの回答
tips
プレビュー