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