How can I incorporate an image map into a fluid layout?

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.