4

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

<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 中检测重新大小我找不到任何语法更新坐标的示例。

4

3 回答 3

6

这是一个很棒的 jQuery 插件，它完全符合您的要求：

响应式图像映射 jQuery 插件

/*    
* 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
*/

希望有帮助

于 2012-12-03T08:18:07.883 回答
3

David Bradshaw 写了一个很好的小库来解决这个问题。它可以与 jQuery 一起使用，也可以不与 jQuery 一起使用。

可在此处获得：https ://github.com/davidjbradshaw/imagemap-resizer

于 2014-02-28T20:03:45.623 回答
0

我最终刮掉了图像映射并使用带有绝对超链接的分区，并根据分区调整它的大小。想避免这种情况，但猜测什么有效，总比没有好。

于 2012-10-31T23:02:14.590 回答