Image Map Question 1

[Mighty]

I have a question in relation to an image map. Basically, I have a map of the world and on it I have marked the countries where my company does business. When the user mouses over the map, it displays a layer showing information about the country.

However, I would like to make it easier to update the imape if a country is removed. Rather than physically altering the image I was wondering if it is possible to add a background color to the <AREA> tag. This would mean that I wouldn't have to alter the color on the image, I could let the area tag control the color on the image.

At the moment I have:

<AREA SHAPE=&quot;rect&quot; onMouseOver=&quot;show('<%=rs(&quot;Country&quot%>')&quot; onMouseOut=&quot;hide()&quot; COORDS=&quot;<%=Trim(rs(&quot;Map Location&quot)%>&quot; HREF=&quot;#&quot;>

Can anyone tell me if this is possible.

Mighty

 

[BillyRayPreachersSon]

Surely you'd just remove the AREA tag for the country that was removed? Or have I missed the point?

Dan

 

[Mighty]

The problem is that I have an image that is a map of the world. On the actual image I place a colour a couple of pixels black to represent the location in question and use the area tag to reference those couple of black pixels.

But if I need to remove that location it means that I physically have to change the image.

What I was hoping to be able to do is have the basic image and then the area tag would add in the black background. Therefore if I wanted to remove a location, I would just have to remove the area tag and wouldn't have to edit the image.

Mighty

 

[BillyRayPreachersSon]

Aaaah..

It seems that AREAs cannot have a backgroundColor style set for them. So you'll probably have to do it with absolutely-placed DIV tags.

Have a small square DIV where you want each &quot;dot&quot; to be, something like:

<div style="position:absolute; width:5px; height:5px; top:20px; left:50px; background-color:#000000;"></div>

One for each country, and you just remove the revelant &quot;dot&quot; when you want to remove a country.

Or you could just edit the image ;o)

Dan

 

[BillyRayPreachersSon]

Oooh - I've just seen the new-look &quot;code&quot; box... Very nice ;o)

 

[ibearian]

did you buy this country picker or did you write if from scratch ??

i am looking for the same thing but for every contry ion the world and its a big job !

ibearian.

PROJECT H
mailto:ibearian@projecth.co.uk

 

[Mighty]

What are you looking for? If you are looking for a list of countries in a select box, go to a website where they have a form with a dropdown list of countries. View the source and take the code for the select list.

Mighty

 

[ibearian]

no i wanted a map to pick countries from, i could do a drop down but they may have to do the process 10 times so a list may be a pain in the butt and a puicture is easier.

I know i can get a map and do hot spots its just time .......

i was going to do exactly what you said and do view source and nick the images and Jscript

ibearian.

PROJECT H
mailto:ibearian@projecth.co.uk

 

[ChrisHunt]

No, (s)he's looking for an image of a world map with <area> tags that outline every country. It's going to have to be a big map if countries like Andorra, Liechtenstein or the Vatican are going to be big enough to click on. Maybe it would be better to have a world map where you can select a continent, then a set of continental maps to select the country from.

Where such a map, or maps, might be found/purchased I don't know.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[Mighty]

I just wrote it myself. I found a map of the world and just added in hotspots to it manually. It's a pain in the ass but I didn't know any other way of doing it.


Mighty

 

[ibearian]

its a he,

but yes i had in my own opinion decided it was a world>>contenant>>country thing but wasn't picky, its only for a protoype at the moment and you know what customers are like!

oh well you don't know where i can download a gif/jpeg/png map of the world and contenants without infridging copywrites do you ?


thanks anyway for just letting me put off the moment for another day or so



ibearian.

PROJECT H
mailto:ibearian@projecth.co.uk

 

[grtfercho]

Complementing Dan's post from feb23
you can use the following code.
The image is from the about.com network and it's free So I don't think there will be a problem with copyrights.
This is just an example and needs more work to it, but it seems a pretty good aproach to your problem.

<html>
<body>
<style>
.bigmap{
top:0px;
left:0px;
}
.hotspot{
width:5px;
height:5px;
background-color:#0099FF;
}

#hotSpot1{
position:absolute;
top:165px;
left:150px;
}
#hotSpot2{
position:absolute;
top:315px;
left:100px;
}
#hotSpot3{
position:absolute;
top:450px;
left:230px;
}
</style>
<DIV class="bigmap" > 
<img src="[URL unfurl="true"]http://geography.about.com/library/blank/uk.jpg"[/URL] width="363" height="511" border="0" usemap="#linkMap" />
  <map name="linkMap" >
    <area shape="poly" coords="194,422,182,440,179,444,166,443,153,446,144,454,144,461,135,466,130,474,117,486,124,488,129,494,147,477,159,481,163,481,172,467,179,462,188,465,197,467,204,463,214,462,228,458,240,462,256,460,268,455,279,450,284,445,289,438,279,436,268,433,274,426,256,423,240,420,228,419,218,417,212,417,202,418,197,420" href="[URL unfurl="true"]http://www.google.com"[/URL] />
    <area shape="poly" coords="85,317,95,332,108,329,117,321,120,316,117,307,116,304,112,295,110,289,106,284,100,284,89,285,82,290,74,296,71,302,66,306,63,310,60,314,60,321,68,324,75,330,80,327,80,324" href="[URL unfurl="true"]http://www.msn.com"[/URL] />
    <area shape="poly" coords="153,183,156,176,160,169,154,167,159,162,167,153,175,147,179,139,180,133,172,131,164,136,156,137,146,137,141,137,138,134,131,135,127,147,124,152,124,157,129,164,121,168,116,168,117,177,118,183,114,186,118,192,122,195,111,202,115,210,111,215,106,218,111,222,116,224,121,225,124,225,127,226,131,228,141,227,147,226,154,225,159,224,165,223,172,220,186,217,188,215,194,211,196,209,200,203,204,196,207,189,209,181,209,177,206,172,194,172,185,173,174,173,165,176,157,179,152,183" href="[URL unfurl="true"]http://www.yahoo.com"[/URL] />
  </map>
</div>
<div  class="hotspot" id="hotSpot1"><img src="fsa" width="3px" height="3px" style="border:medium solid blue"></div>
<div  class="hotspot" id="hotSpot2"><img src="" width="3px" height="3px" style="border:medium solid green"></div>
<div  class="hotspot" id="hotSpot3"><img src="" width="3px" height="3px"  style="border:medium solid red"></div>

</body>
</html>

If this works for you then just change the names and IDs accordingly and your good to go.
THe nice extra feature about this approach is that you can have the image that marks the 'X' as a small GIF animation. uuummmm I'm even thinking that a flash animation too, but probably that's too much for now.

Tip: you have to wrap the image on a <a > tag and make it link to the same place the hotspot is going. Otherwise people will click like crazy on the 'X' and nothing will happen.


grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------

http://www.llajta.com

 

[grtfercho]

Sorry about the last post I didn't realize the length of it.

Maybe Tek-tips should wrap things when posting code...

Or I should be smart enough to use the "Preview Post" before posting...

Sorry again.

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein
-----------------------------------------------

http://www.llajta.com