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

我建议，而不是图像映射，制作 3 个 div，这些 div 是与以下 HTML 和随附 CSS 的链接。

<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%;
}

您应该查看此页面以了解有关制作div链接的更多信息。我还建议使用NewMatGuide.pngas abackground-image并定义#img_ID.

于 2013-10-23T20:55:51.850 回答