调整大小的图像地图/区域坐标更新

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插件，做你想要什么：

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

我结束了刮图像映射，并使用绝对超链接的分区，并根据分区调整大小。想要避免这种情况，但猜测什么是有效的，更好的是什么都没有。

Answer 3

大卫·布拉德肖写道，解决了这个问题一个很好的小库。它可以使用或不使用jQuery。

可在这里：https://github.com/davidjbradshaw/imagemap-resizer