Twitter Bootstrap搞砸了我的图片 - 任何人都有这个问题？

首先 - 这是我有史以来的第一个问题（我仍然是初学者），我不能说我多么感激这个网站和我在这里找到的所有帮助。希望每个问题，我问可以帮助别人:)Twitter Bootstrap搞砸了我的图片 - 任何人都有这个问题？

我意识到没有多少人使用imagemaps更多，但我有一个和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">

来源

2013-10-23 Addameus

请更具体地了解链接是如何不正确的。更好的是，创建一个演示问题的小提琴：http://jsfiddle.net – isherwood

注意：您将很难让图像调整大小，并且MAP仍然工作，因为这些COORDS是硬编码的，并且不会像图像那样进行缩放。 –

@RyanMcDonough是正确的; MAP与缩放图像不兼容。然而，只是一个想法：跳过硬编码声明，而是使用jquery来检测屏幕上缩放的图像大小，然后计算坐标作为百分比转换为像素。因此，如果您知道顶部坐标是正确的4％和下降的11％，那么您可以根据缩放的大小（大致）确定上/下多少个像素。这对像素来说并不准确，但你可能会接近。我看不到任何其他的方式。 – PhilNicholas

我建议，而不是图像映射，使3周的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 和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的大小。

来源

2013-10-23 20:55:51 SwankyLegg

Twitter Bootstrap搞砸了我的图片 - 任何人都有这个问题？

回答

相关问题