Help - Search - Members - Calendar
Full Version: Scaleable Image Maps
The Other Side forums - suitable for mature readers! > The Other Side forums > Tips and tricks
I'm trying to comprehend how to make image maps for web pages that would rescale/degrade properly
when the browser is resized but still keep the proper ratio between coordinates and image size.

I've got a vague feeling this could be done with CSS or Javascript, but I'm trying to do it without opening
a Javascript window or applying ugly, bestial hacks that are more than 30 lines of code.

I know image maps are a bit archaic, but this could be very nifty nonetheless. Ideas?
Snipped because of a misunderstanding...'Image maps' generally referr to a single image that is divided up into several clickable links by defining shapes within the image to act as hotspots, but you seem to be referring to just controlling the layout of images within the page. See:

Actully though image maps may still be a good solution - use a single image for the entire page and use image maps for the links - that way the image will stay the same size regardless of the size of the window. It'll be slow loading though since it's a brute force and inelegant solution.
This page may be useful:

It gives the best sizes of screens that you should design for. CSS can be used to move images around.

My main pages are done with CSS and so menus and logos move around depending on the browser size. It's quite a powerful system when you get the hang of it.

Some sites use a pop-up window of a set size with no scroll bars to display their content, that way they csn control the exact size of the layout, for exampe . You might want to consider that as a solution.
Its great to get replies so quickly, so thank you for that.

That webmonkey site is a helpful one; I wasn't aware of it. I think, in some way, I'm making the error
of blurring the boundaries between content and presentation. I've read some arguments about that,
some trite, and some thorough. Perhaps the image could be more of a background image and the
links made invisible (with CSS) with an a:hover rule to make them visible and the links positioned
with percentages or em's ?

This link from A List Apart is interesting
but uses pixels and not percentages. I tried using what was posted there but with percentages and
had no luck...abandoned this approach.

The idea of using a popup window with defined dimensions is appealing. I can see how that would work.
Still thinking this through..any further suggestions are helpful. I think there may be many ways to go
about this, but to find one that works cross-browser may be a challenge.
QUOTE (synCsil @ Nov 3 2004, 05:00 PM)
Perhaps the image could be more of a background image and the
links made invisible (with CSS) with an  a:hover rule to make them visible and the links positioned
with percentages or em's ?

This is what image maps (see my - now heavily edited - post above). They define areas in an image as hyperlinks.

Alternatively it's best to just specify in CSS using pixels and decide on a suitable size for the site (say 600px wide) and keep everything within a table or div of that width. This may waste some screen space for people with large monitors but it keeps everything nice and consistent. Unfortuantely it seems a bit hit and miss when it comes to wordwrapping - it's seems to me to be more art than science to make the browser wrap the words instead of expanding the object that contains them.
CSS all over is a bit of an arcane art, but as a demonstration of what Moop means by setting a site up to always be one width have a look at this site I made Axminster Cleaning Company UK (which in Jonman's brother's company).

The site content is centred, there's a subtle repeat background to make it look nice, and everything else will stay in the same ratio because of the defined width on the central area.
In the CSS of the link you gave above, you are then referring to ...

#wrapper {
padding: 0px;
width: 740px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

where width: 740px is the defined width which it always is required to be ?
and margin-left/right: auto centers the whole affair is what I am gathering
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.