jquery - 如何将图像映射合并到流体布局中？

Question

我目前非常头疼，试图让我正在构建的网站能够跨可变分辨率工作。主要导航是通过需要填充大部分视口(viewport)的图像映射。我知道这完全过时了，但图像映射似乎是唯一允许多边形区域定界的非 Flash 解决方案 - 不过我喜欢一个替代方案!

我最终设法调整网站大小，以允许使用条件 jQuery 和 CSS 在较小的显示器上显示主图像，但这也会调整 slickboxes 内的文本大小，这看起来很糟糕!

该网站(非常未完成)是 here 。我知道导航还不完全清晰(将鼠标悬停在上面并单击油漆颜色)，但我想首先解决这个问题。

我的问题总结如下:

1. 是否有其他方法可以在不使用图像映射的情况下创建此多边形热点翻转图像？
2. 是否有其他方法可以调整图像映射和覆盖的 slickbox 的大小，同时保持文本大小相同？

非常感谢 - 整个周末都在揪头发!

Answer 1

编辑:百分比方法不起作用。

在这种情况下，我唯一能看到的是这样的:

使用百分比表示法获得形状:

 <area shape="rect" coords="0,0,0,0" mycoords="1%,3%,25%,29%">

在第一次绘制和每个窗口调整大小时:

• 解析每个区域的 mycoords 属性

• 将百分比拆分为四个整数

• 根据图像的 .width() 属性计算百分比

• 根据计算出的像素值设置区域的coords属性

这并不完全是微不足道的，但是对于经验丰富的 jQueryist 来说这应该很容易实现。

旧答案:

嗯。那么您有一个需要动态调整大小的图像映射？

我自己从未尝试过，但是使用相对坐标怎么样=

 <area shape="rect" coords="1%,3%,25%,29%">

不知道这是否有效，但值得一试。