イメージマップHTMLページの応答性の出力を与えていません

Question

イメージをHTMLページに表示しようとしています。イメージに6つのサークルがあり、6つのサークルすべてがクリック可能になっています。

私はその機能を達成しましたが、静的です。 これは、携帯電話でその画像を表示しているときは、クリック可能なサークルがすべて適切な場所にないことを意味します。

どのようにイメージマップを反応させることができますか？以下は

私は、Webページ上の応答に何かをしようとしないときは何

<div> 

<img usemap="#planetmap" width="588px" height="471px" style="display: block;margin: 0 auto;" src = "domains.png";> 

<map name="planetmap"> 
    <area shape="circle" coords="327,70,66" href="#" target="_blank" alt="" /> 
    <area shape="circle" coords="160,165,66" href="" target="_blank" alt="" /> 
    <area shape="circle" coords="490,166,66" href="" target="_blank" alt="" /> 
    <area shape="circle" coords="162,358,66" href="" target="_blank" alt="" /> 
    <area shape="circle" coords="490,358,66" href="" target="_blank" alt="" /> 
    <area shape="circle" coords="327,451,66" href="" target="_blank" alt="" /> 
</map> 
<div> 


</div> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.rwdImageMaps.min"></script> 
<script>  

    $(document).ready(function() { 
     $('map').imageMapResize(); 
    }); 
</script> 

Answer 1

を使用していたコードはI、いずれかの2つのいずれかです。 'Media Queries'を使うか、またはb。 'Bootstrap'のようなフロントエンドCSSフレームワークを使用してください。個人的に私は後者を好む。ここで

（これはあなたのCSSファイルになる）一定の条件が満たされたときに指定した画像のサイズを小さくしますメディアクエリの例です：

今

@media (min-width: 700px) 
{ 
    .map { width: 400px; height: 400px; } 
} 

デバイスの幅が満たしている場合指定されたCSSコードが.map要素に適用されます。

これは非常に基本的な例ですが、正しい軌道上で始めることができます。メディアクエリを変更して、マップのサイズを異なる画面サイズに合わせて変更することができます。詳細情報についてはこちらをご覧ください：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries