5

私はレスポンシブ サイトに取り組んできましたが、イメージ マップで少し問題が発生しました。イメージ マップは、パーセンテージ ベースの座標では機能しないようです。少しグーグルで調べた後、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 ボックスのサイズを変更すると、すべてが歪んでしまいます。

どんな助けでも大歓迎です。

4

2 に答える 2

5

div投稿したフィドルの CSS にいくつかの問題がありました (終了タグの欠落も同様です)。#block100% の高さではなく相対的に配置されていること、およびアンカーがブロック/絶対配置されていることを確認した後、タグをブロックと一緒に移動させることができました。

更新されたフィドルは次のとおりです。

http://jsfiddle.net/wAf3b/24/

CSS

html, body {
  height: 100%;
}

#block{ float:left; width:100%; max-width: 400px; position: relative; }

#content{
  height: 100%;
  min-height: 100%;
}

#block img {
  max-width: 100%;
  display: inline-block;
}

a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);}
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <title>Bulky Waste</title>
</head>
<body>
    <div id="content">
        <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>
    </div><!--/content-->
</body>
</html>

One important thing to note with the new html is the use of DOCTYPE. For some reason, some browsers don't like it when it is not capitalized.

于 2012-11-21T19:29:25.677 に答える
0

絶対配置要素はレイアウトの一部ではなくなるため、親から相対的な寸法プロパティを継承できません。必要なことを行うには JavaScript が必要です。

JS を無効にした人は、エクスペリエンスの低下をすでに予期しています。

于 2012-11-21T19:05:42.250 に答える