问题
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:
- Is there an alternative way to create this polygonal hotspot rollover image without using an Image Map?
- 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!
回答1:
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
mycoordspropertySplit percentages into four integers
Calculate percentages based on the image's
.width()propertySet the area's
coordsproperty 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.
回答2:
It's a little bit limited, but you CAN do irregular shapes with HTML/CSS.
A List Apart
CSS Play
You should be able to adapt one of those to your purposes.
EDIT:
Regarding image resizing, you need to use relative widths in your CSS instead of hardcoding them in pixels
In fact, there is a flexible framework that may already take care of much of that for you: Check out CSS Grid.
回答3:
Another work around for hotspots in a fluid design is to make a responsive static image with links in Edge Animate. The hotspots (or layers that act as hotspots) are then totally responsive. The downside being that a 50kb image will be about 120kb's when output from Edge. Having said that its a pretty quick work around.
来源：https://stackoverflow.com/questions/4137302/how-can-i-incorporate-an-image-map-into-a-fluid-layout