Question

首先 - 这是我的第一个问题（我还是初学者），我不能说我多么感谢这个网站以及我在这里找到的所有帮助。希望我提出的每个问题都可以帮助其他人：）

我意识到没有多少人使用图像地图了，但我有一个和twitter bootstrap（版本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">

Answer 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 ₁和X ₂坐标对于图像映射中的链接是相同的，下面的示例（使用不同的％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%;
}

您应该查看this page以了解有关制作div链接的详情。我还建议您使用NewMatGuide.png作为background-image并定义#img_ID的大小。

Twitter Bootstrap搞砸了我的图像地图 - 其他人都有这个问题吗？

1 个答案: