如何将图像映像合并到流体布局中？ [英] How can I incorporate an image map into a fluid layout?

问题描述

我目前正困扰着我正在建立一个能够跨越可变分辨率工作的网站。主要导航是通过需要填充大部分视口的图像映射。我知道这完全是过时的，但是图像映射似乎是允许多边形区域划分的唯一非Flash解决方案 - 我会爱一个替代方案！

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

该网站（非常未完成）是rel =nofollow>artforeating.co.uk/portia/rainbowwhitebgscale.html。我知道导航还不完全清楚（悬停在并点击油漆颜色），但是我想先排序这个问题。

我的问题总结： / p>

1. 有没有一种替代方法来创建这个多边形热点翻转图像而不使用图像映射？


2. 还有一种方法可以调整图像地图和叠加的slickbox的大小，同时保持文本相同的大小？

非常感谢 -

解决方案

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

在这种情况下，我唯一可以看到的就是这样：

使用百分比表示法使用形状： / p>

 < area shape =rectcoords =0,0,0,0mycoords =1％，3％ ，25％，29％> 
  

在第一个绘图和每个窗口上调整大小：

• 解析每个区域的 mycoords 属性




• 按百分比分为四个整数




• 根据图片的 .width（）属性




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

不是很简单，但这应该是一个经验丰富的jQueryist实现的一半。

旧答案：

嗯。所以你有一个需要动态调整大小的图像映射？

我从来没有尝试过这个，但是如何使用相对坐标=

 < area shape =rectcoords =1％，3％，25％，29％> 
  

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

I am currently having a huge headache trying to get a site I'm building to work across variable resolutions. The main navigation is through an image map that needs to fill most of the viewport. I know this is totally outmoded but an image map seems the only non-Flash solution to allow polygonal area delimiting - i'd love an alternative though!

I have eventually managed to get the site to resize to allow the main image to display on smaller monitors using conditional jQuery & CSS, but that resizes the text within the slickboxes too, which looks awful!

The site (very much unfinished) is here. I know the navigation isn't entirely clear yet (hover over and click paint colours), but I want to sort this issue first.

My questions, in summary:

1. Is there an alternative way to create this polygonal hotspot rollover image without using an Image Map?
2. Is there otherwise a way of resizing the image map and overlaid slickboxes, while keeping text the same size?

Thanks so much - been pulling hair out over this all weekend!

解决方案

Edit: The percent approach doesn't work.

In that case, the only thing I can see goes like this:

Have shapes using percent notation:

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

On the first draw and on every window resize:

• parse each area's mycoords property

• Split percentages into four integers

• Calculate percentages based on the image's .width() property

• Set the area's coords property based on the thusly calculated pixel values

Not entirely trivial, but this should be halfway easy to implement by a seasoned jQueryist.

Old answer:

Hmm. So you have an imagemap that needs to resize dynamically?

I have never tried this myself, but what about using relative coordinates=

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

No idea whether this works, but worth a try.

这篇关于如何将图像映像合并到流体布局中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！