Re: Image map area tag background image

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/

.

Relevant Pages

  • Re: Putting dots on a map
    ... and draw the dots on there however you please. ... give credit to the authors of the map and/or license your map under ... If you want to be precise about it, go get a copy of QGIS (http://www.qgis.org ... Hawaii Highways: http://www.hawaiihighways.com/ ...
    (misc.transport.road)
  • Re: Graphing Geographic Data
    ... > Dim finalBitMap As Bitmap ... > Dim intHeight As Integer ... I can draw the image on the map ... >> all the dots. ...
    (microsoft.public.dotnet.framework.drawing)
  • Re: Graphing Geographic Data
    ... Windows Forms Tips and Tricks RSS: http://www.bobpowell.net/tipstricks.xml ... > can draw the map without a problem, ... > all the dots. ... When the frame that gets the data reads the data, ...
    (microsoft.public.dotnet.framework.drawing)
  • Re: OT:Mapping Software - Pushpins For Customer Postcodes - Any Ideas Anyone?
    ... I have about 100 locations I want to overlay onto the map so I can see ... When you put them on the map they will just be little dots - if you want ... Which version of Autoroute do you have? ...
    (uk.media.dvd)
  • Re: OQFTCI98 Game 6 Rounds 7-8: Muppets, map disorientation
    ... Who are the two old guys in the balcony in "The Muppet Show"? ... You will observe on the two handout pages that there is no indication ... each map that we name, you must tell us *which of the 8 lettered ... name the country or its capital (give the information for fun ...
    (rec.games.trivia)