473,326 Members | 2,813 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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 <areaso it
will display over the image map.
I am failing miserably at that.
Anybody tried to do that before?
Anybody succeeded?
Jun 27 '08 #1
4 14591
Scripsit GArlington:
The challenge is to add background image (dot) to each <areaso 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/

Jun 27 '08 #2
In article
<d3**********************************@f63g2000hsf. googlegroups.com>,
GArlington <ga********@tiscali.co.ukwrote:
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 <areaso 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
Jun 27 '08 #3
On Jun 5, 5:39 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit GArlington:
The challenge is to add background image (dot) to each <areaso 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
<areaelements for each office, these <area.
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 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...
>
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...
Jun 27 '08 #4
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/

Jun 27 '08 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: Imran | last post by:
Hi, I am attempting to create a CSS-driven website, in that I want to be able to control the display/content from the CSS file. I do not want to use tables. On a page, I have a background...
1
by: RJ | last post by:
Hello! I am trying to lay out a left navigation column with a background image, where the left nav column runs the entire scrolled height/length of the page. The float:left column layout works...
7
by: Georges Bessis | last post by:
The image I set as background are left at original size. In a picturebox, I can decide to strech the image. Can I do that to fill my background ? Regards GB
8
by: Warren Post | last post by:
At <http://snow.prohosting.com/srcopan/dry/test.es.html>, you will see that the background image runs down the left margin. The right hand side of it is faded, watermark style, but it is one single...
1
by: alokw | last post by:
Hi everyone, Here's my problem. I'd like to revamp my web site, and I have this idea. I want to create essentially a border around the screen of about 100 pixels of just black. Heres where...
1
by: rsteph | last post by:
I've got some product information pages, with images and text, all setup within a table. I'm trying to add a small image in the upper right hand corner of the content div (where all the important...
1
by: swc76801 | last post by:
I desperately need help. My understanding of CSS is non-existent. I have a store http://astore.amazon.com/texasheat-20 with Amazon.com. According to the information from Amazon.com "Write your own...
5
by: studentofknowledge | last post by:
hi guys im new to javascript and need some guidence please.. im trying to display a 400x400 pixel coloured area in the middle of a webpage that stays in the middle with a browser window resize....
0
by: ton | last post by:
Hi, I have an Image which is dark grey/black, at the top a white line, at the left site a white line as well. At 192 px from the left of the screen I position a DIV with this image as the...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.