1

最初に - これは私の初めての質問です (私はまだ初心者です)。このサイトとここで見つけたすべてのヘルプにどれほど感謝しているかは言えません。私が尋ねるすべての質問が他の誰かにも役立つことを願っています:)

もう多くの人がイメージマップを使用していないことに気付きましたが、私はイメージマップを持っていて、twitter ブートストラップ (バージョン 3.0.0) が座標を台無しにして、リンクを間違った場所に配置しています。次のコードで動作させることができますが、画面に合わせてサイズが変更されません。任意のヒント？

<style>
<!Driving me nuts - without this the imagemap links are in the wrong places - with this it wont resize>
#img_ID {
    max-width:none;
    width:auto;
    display: inline;

}

</style>

実際のイメージマップ コードのスニペットを次に示します。

<div style="width:100%">
<img id="img_ID" src="NewMatGuide.png" USEMAP="#map" border="0" class="" width:100% alt="">
</div>
 <Map id="map_ID" name="map">
   <AREA shape="RECT" COORDS="80,151,258,252" HREF="PlacementResults.php?ChosenArea=A">
   <AREA shape="RECT" COORDS="80,328,258,432" HREF="PlacementResults.php?ChosenArea=B">
   <AREA shape="RECT" COORDS="80,521,258,620" HREF="PlacementResults.php?ChosenArea=C">
4

1 に答える 1

1

イメージ マップではなく、次の HTML と付随する CSS とのリンクである 3 つの div を作成することをお勧めします。

<div id="box_a">
    <a class="box_link" href="PlacementResults.php?ChosenArea=A"></a>
</div>
<div id="box_b">
    <a class="box_link" href="PlacementResults.php?ChosenArea=B"></a>
</div>
<div id="box_c">
    <a class="box_link" href="PlacementResults.php?ChosenArea=C"></a>
</div>

パーセンテージを使用して座標を定義します。X 1座標と X 2座標がイメージ マップ内のリンクで同じである場合、次の例 (実際にイメージを正しくカバーするために異なる %s を使用) が機能するはずです。

#box_a, #box_b, #box_c {
    margin-left: 10%;
    margin-top: 5%;
    height: 15%;
    width: 25%;
}
.box_link {
    display: block;
    height: 100%;
    width: 100%;
}

リンクの作成について詳しくは、このページをご覧ください。as を使用してのサイズを定義するdivこともお勧めします。NewMatGuide.pngbackground-image#img_ID

于 2013-10-23T20:55:51.850 に答える