4

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

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

该网站（非常未完成）在这里。我知道导航还不完全清楚（悬停并单击油漆颜色），但我想先解决这个问题。

我的问题，总结一下：

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

非常感谢——整个周末都在拔头发！

4

3 回答 3

2

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

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

有使用百分比符号的形状：

 <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%">

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

于 2010-11-09T19:17:25.707 回答
1

它有点有限，但你可以用 HTML/CSS 做不规则的形状。

一个列表分开

CSS播放

您应该能够根据您的目的调整其中之一。

编辑：

关于图像大小调整，您需要在 CSS 中使用相对宽度，而不是以像素为单位进行硬编码

事实上，有一个灵活的框架可能已经为您处理了大部分问题： 查看 CSS Grid。

于 2010-11-09T19:42:45.153 回答
0

流体设计中热点的另一种解决方法是在 Edge Animate 中制作带有链接的响应式静态图像。然后热点（或充当热点的层）完全响应。缺点是从 Edge 输出时 50kb 的图像大约为 120kb。话虽如此，这是一个非常快速的工作。

于 2015-04-17T04:18:57.617 回答