Question

我正在制作一个带有不同链接的主控制页面，现在唯一的问题是我希望图像适合整个页面并重新调整大小（窗口），如果它们缩小（在某种程度上）和把它放大

<img src ="image/main.jpg" style="width:100%;height:100%; min-width:600px; min-height:400px;" alt="Main" usemap="#MainMap">

<map name="MainMap">
<area id="login" class="login" shape="circle" coords="91,677,92">
<area id="money_management" class="money" shape="circle" coords="598,680,92">
<area id="withdraw_history" shape="circle" coords="596,304,67">
<area id="transaction_history" shape="circle" coords="784,624,67" href="History.html">
<area id="cart" shape="circle" coords="396,698,67,92">
<area id="buy" shape="circle" coords="898,352,92">
<area id="sell" shape="circle" coords="718,438,92">
<area id="new" shape="circle" coords="570,132,92" href="New.html">
</map>

我之前有这个，当我把图像静态并让它继续处理其他东西时，我想在重新调整窗口大小后更新坐标我知道如何在jquery中检测重新调整大小我不能找到有关更新坐标的任何语法示例。

Answer 1

这是一个很棒的jQuery PlugIn，可以完全满足您的需求：

Responsive Image Maps jQuery Plugin

/*    
* rwdImageMaps jQuery plugin v1.4    
*    
* Allows image maps to be used in a responsive design by recalculating 
* the area coordinates to match the actual image size on load and 
* window.resize     
*    
* Copyright (c) 2012 Matt Stow    
* https://github.com/stowball/jQuery-rwdImageMaps    
* http://mattstow.com    
* Licensed  under the MIT license
*/

希望有所帮助

Answer 2

David Bradshaw写了一个很好的小库来解决这个问题。它可以在有或没有jQuery的情况下使用。

此处可用：https://github.com/davidjbradshaw/imagemap-resizer

Answer 3

我最终抓取图像映射并使用具有绝对超链接的分区，并根据分区调整大小。想要避免这种情况，但猜测什么有效，那就更好了。

调整大小时的图像映射/区域坐标更新

3 个答案: