私はレスポンシブ サイトに取り組んできましたが、イメージ マップで少し問題が発生しました。イメージ マップは、パーセンテージ ベースの座標では機能しないようです。少しグーグルで調べた後、JSの回避策を見つけました- http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html。ただし、JS を無効にしてサイトを動作させたいと考えています。
そのため、これらの可能性を使い果たした後、同じことを行うために、画像上に相対的に配置されたアンカー タグを使用することを検討することにしました。とにかく、これはより良いオプションです。パーセンテージベースの位置とサイズで画像の上にアンカータグを配置しようとしましたが、ブラウザーのサイズを変更するたびに、アンカータグが画像に不均衡に移動します.
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
<a href="#" class="one"></a>
<a href="#" class="two"></a>
</div>
CSS:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
これが私が何を意味するかを説明するためのjsFiddleです - http://jsfiddle.net/wAf3b/10/。HTML ボックスのサイズを変更すると、すべてが歪んでしまいます。
どんな助けでも大歓迎です。