Image map area tag background image

I am trying to implement an image map (in this particular case a
country map) with few <area ...>s on it.
The challenge is to add background image (dot) to each <area> so it
will display over the image map.
I am failing miserably at that.
Anybody tried to do that before?
Anybody succeeded?

Scripsit GArlington:

The challenge is to add background image (dot) to each <area> so it
will display over the image map.

Won't work. By the specs, you can set background properties for an area
element, as for any element. In practice, they'll be ignored.

So you need to define the goal more exactly, so that alternative
approaches could be suggested. In particular, "why" is a good question.
And do you really expect a _background_ image display _over_ an image
map?

You can set a background for the entire image, making the background
image itself different in different areas of the foreground image. I
don't know why you would do that, but the whole idea looks odd to me. If
this approach wouldn't work, why not?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

In article
<d37de687-82db-4354-9450-50579ebca6ac (AT) f63g2000hsf (DOT) googlegroups.com>,
GArlington <garlington (AT) tiscali (DOT) co.uk> wrote:

I am trying to implement an image map (in this particular case a
country map) with few <area ...>s on it.
The challenge is to add background image (dot) to each <area> so it
will display over the image map.
I am failing miserably at that.
Anybody tried to do that before?
Anybody succeeded?

I don't know what you are doing exactly but you can do things with JS. A
dot?

<http://netweaver.com.au/alt/slices/map_strict_block.html>

Which does not change bgs but this sort of thing can easily be adapted.

--
dorayme

On Jun 5, 5:39 pm, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

Scripsit GArlington:

The challenge is to add background image (dot) to each <area> so it
will display over the image map.

Won't work. By the specs, you can set background properties for an area
element, as for any element. In practice, they'll be ignored.
That is what I suspected from my attempts to make it work...

So you need to define the goal more exactly, so that alternative
approaches could be suggested. In particular, "why" is a good question.
And do you really expect a _background_ image display _over_ an image
map?
The goal was to create a dynamic country map with dots and clickable

<area> elements for each office, these <area> .
Until recently the country map was created as an image WITH dots for
each office and <area> elements were created separately taking
coordinates of each office from DB. I was hoping that it would be
possible to include the dot for each <area> thus 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...

You can set a background for the entire image, making the background
image itself different in different areas of the foreground image. I
don't know why you would do that, but the whole idea looks odd to me. If
this approach wouldn't work, why not?

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
I am not sure who (it was before my time) came up with the idea of

using imagemap for this purpose here, it looks like I will end up
using good old clickable images instead...

Scripsit GArlington:

The goal was to create a dynamic country map with dots and clickable
area> elements 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 <area> elements 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 <map> element must be referred to by a
foreground image (specified by an <img> element's src attribute), but it
does not really "know" what the image itself is. The <area> elements
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 <area> thus 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 <area> elements 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
<div> is 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 <map> element, 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 <map> element. 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/