調整大小的圖像地圖/區域座標更新

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