質問させてください。クリッカブルマップをWordPressの中のjQueryでレスポンシブ対応させる方法をどなた様か教えて頂けませんでしょうか。
jQuery-rwdImageMapsというプラグインを使用したいのですが、WordPressへの設定方法についてきちんと記載があるものは見つけられず、スマホで見ると座標がズレた状態となっております。どうか、アドバイスの程、宜しくお願い致します!
私が試した方法は下記の通りです。
html
1<img src="img.png" width="800" height="115" usemap="#ImageMap"> 2<map name="ImageMap"> 3 <area shape="rect" coords="200,0,500,110" href="#" alt="" /> 4</map>
CSS
1img[usemap] { 2 max-width: 100%; 3 height: auto; 4} 5
header.php
1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 2<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script> 3<?php wp_head(); ?> 4<script> 5jQuery(document).ready(function(e) { 6 jQuery('img[usemap]').rwdImageMaps(); 7}) 8</script>
回答2件
あなたの回答
tips
プレビュー