Scripsit GArlington:
The goal was to create a dynamic country map with dots and clickable
<areaelements for each office, these <area.
I see. This might have some added value as compared with just a simple
list of links, especially if it is not evident what the areas are. E.g.,
several small countries might have grouped into one area, and it would
be useful to a user to see at a glance which are his country belongs to.
But this is a simple image map issue and need not involve CSS at all.
Until recently the country map was created as an image WITH dots for
each office and <areaelements were created separately taking
coordinates of each office from DB.
I'm not sure whether I can follow this. But anyway, you can have a
background image with a country map and a foreground (content) image
that is transparent except for some dots. Once you have the images, the
styling is rather trivial. The <mapelement must be referred to by a
foreground image (specified by an <imgelement's src attribute), but it
does not really "know" what the image itself is. The <areaelements
specify geometric patterns inside a rectangle, and the actual image is
technically independent of this, though of course crucial to the human
eye, which only sees the actual image and not the area specifications.
I was hoping that it would be
possible to include the dot for each <areathus saving the
inconvenience of re-uploading the map every time the new office is
added - and yes, it happens fairly often - I had to do it three times
in the last year and it has to go through testing every time to make
sure that coordinates and dots on the image go together...
I see. But the <areaelements specify abstract shapes only, not image
data.
On the other hand, you could overlay several images, using CSS. I first
experimented with the idea of a normal imagemap, with other images (each
corresponding to one dot) laid over it. This would take place so that a
<divis relatively positioned, with several img elements inside it, all
"absolutely" positioned (i.e., positioned relatively to the enclosing
<div>), with different z-index values. However, browsers seems to treat
the situation so that when the topmost (largest z-index) image is not
the one referencing the <mapelement, it effectively turns into a
passive area in the map.
Back to the drawing board. Let's create an image containing just the
dots, otherwise transparent, and refer to it in the <mapelement. Then
make the real map image a background image of that image. Something like
<img id="countries" src="dots.gif" style="background:
url(countries.gif)"
usemap="#areas">
Oddly enough, or maybe not so oddly, this seems to work.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/