jquery - 调整大小时图像 map /区域坐标更新

标签 jquery html

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

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

最佳答案

这是一个很棒的 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
*/

希望对你有帮助

关于jquery - 调整大小时图像 map /区域坐标更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13151469/

相关文章:

jquery - 如何选择 div 内的图像以更改其来源?

html - 奥格 : Image and Facebook Link thumbnails

javascript - 如何使用 Jquery/Javascript 将我的一个文件夹中的所有图像加载到我的网页中

html - 最小宽度 : 1920px not firing off correctly

javascript - PhoneGap 应用程序不会连续两次查询服务器

php - 使用ajax和json处理多个数据库行

jQuery:是否可以将多个事件分组到一个 .click() 中?

html - 浏览器键盘滚动可以隐式绑定(bind)到 div 吗?

javascript - 使用Javascript将`Div.backgroundColor`更改为`Element.backgroundColor`

javascript - 按 ENTER 键时表单未发布到服务器