如何将图像映射合并到流畅的布局中？
我目前正在努力想要建立一个可以在不同分辨率下工作的网站。 主导航是通过需要填充大部分视口的图像映射。 我知道这已经过时了，但是图像映射似乎是唯一允许多边形区域划分的非Flash解决方案 – 我喜欢另一种选择！
我最终设法让网站resize以允许主图像使用条件jQuery和CSS在较小的显示器上显示，但是这也调整了slickboxes中的文本大小，这看起来很糟糕！
该网站（非常未完成）就在这里 。 我知道导航还不完全清楚（将鼠标hover在上面并点击油漆颜色），但我想首先对此问题进行排序。
总结我的问题：
- 是否有另一种方法可以在不使用图像映射的情况下创建此多边形热点翻转图像？
- 有没有办法调整图像映射的大小和覆盖光滑的盒子，同时保持文本大小相同？
非常感谢 – 整个周末一直把头发拉出来！
编辑：百分比方法不起作用。
在这种情况下，我唯一能看到的是这样的：
使用百分比表示法形状：
在第一次抽奖和每个窗口resize：
-
解析每个区域的
mycoords属性 -
将百分比分成四个整数
-
根据图像的
.width()属性计算百分比 -
根据如此计算的像素值设置区域的
coords属性
并非完全无足轻重，但这应该是经验丰富的jQueryist实现的一半。
老答案：
嗯。 那么你有一个需要动态resize的imagemap吗？
我自己从未尝试过，但是使用相对坐标=
不知道这是否有效，但值得一试。
它有点受限，但你可以用HTML / CSS做不规则的形状。
一份清单
CSS播放
您应该能够根据您的目的调整其中一个。
编辑：
关于图像大小调整，您需要在CSS中使用相对宽度，而不是以像素为单位对其进行硬编码
事实上，有一个灵活的框架可能已经为您解决了很多问题： 查看CSS Grid 。
流体设计中热点的另一个解决方法是使用Edge Animate中的链接制作响应式静态图像。 然后，热点（或充当热点的层）完全响应。 缺点是当从Edge输出时，50kb的图像大约为120kb。 说了这个很快的工作。