When click a county in a list box can I color that county in a map?

greygirl · Aug 10, 2002

Help!!
I have a map of US state of counties. It is plain and without color. I have a list box of all the counties names. Is there a way select a county from the list box and that particular county in the map gets lighted i.e painted with color. Please if anybody has done this or has any idea of doing this - please let me know
Thanks
greygirl

RISTMO · Aug 11, 2002

I'd use flash. Otherwise you could get stuck in some tricky image problems.

Rick if(($question=="has been bugging me"
AND $answer=="fixed the problem&quot

OR $answer=="really good post&quot

{
print("Star&quot

;
}else{
print("Thanks.&quot

;
}

greygirl · Aug 12, 2002

Help!
Anybody! any ideas how to do this!
greygirl

starway · Aug 13, 2002

The algorythm is this:

1. Create a function that will perform image change when you select different option from <select>.
It should be something like this (I write this on the fly and didn't tested it so it can require some debugging):

function selectState(state) {
document.images['map'].src = eval(state.name + ".gif&quot

;
}

2. Add image to your html and name it 'map':
<img src="default.gif" width="" height="" name="map">

3. Add <select> to your html with all states and add onChange event handler:
<form name="states_map">
<select name="states" onChange="selectState(this.options[this.selectedIndex])">
<option name="AS">Alaska
<option name="FL">Florida
. . .
</select>
</form>

4. Create 50 images for highlighted states, name them as as.gif, fl.gif, etc (exactly as you names options in <select>) and add preloaders for them:

if (document.images) {
img1 = new Image();
img1.src = "as.gif"
img2 = new Image();
img2.src = "fl.gif";
. . .
}

So the <head> will contain all this:
<script>
if (document.images) {
img1 = new Image();
img1.src = "as.gif"
. . .

function selectState(state) {
document.images['map'].src = eval(state.name + ".gif&quot

;
}
</script>

That's all.
Now when you select something from drop-down list the image will change to appropriate one.
Note that you cannot use image maps as there's no possibility to change a part of it. That's why you need a set of images that will replace the default one.

RISTMO · Aug 13, 2002

But that way will make 50 images of one state each. They will all be separate. You cannot do this with all the states combined in one image (ie. next to each other). you could do it with fifty different images and have them overlap each other. That would work, but like I said, it would be a big script. Otherwise, the easiest way is with flash.

Rick if(($question=="has been bugging me"
AND $answer=="fixed the problem&quot

OR $answer=="really good post&quot

{
print("Star&quot

;
}else{
print("Thanks.&quot

;
}

starway · Aug 13, 2002

>>But that way will make 50 images of one state each. They will all be separate.
No. Each image will contain the full map with some highlighted state.

>>That would work, but like I said, it would be a big script.
It's not the small one, but not the biggest one for sure among all available online.
And if you use a loop for image preloader (that will need a change in image naming - I didn't implement it here in order to make the whole idea clear) it will be just several lines in length.

Magnificat · Aug 13, 2002

The way I personally would do this would be to have the map absolutely positioned, then absolutely position images of the counties, all highlighted, over that map, and set them to style="display:none" or style="visibility:hidden". Then just change the stylesheet attribute to highlight a county. I don't have time to write up an example right now, though. And a note: if you use the display property rather than the visibility property, you may want to use a preloader because Netscape doesn't load images for which display=none, leading to an annoying lag. Hope this helped.

starway · Aug 13, 2002

So what you offer Magnificat is the same idea that I offered, but more complicated one. Same images, same preloader - just added other things that can make your life harder (and not so useful in this case).
I don't even mention the existing difficulties in positioning for cross-browser support.

Just note that absolute positioning is not always convenient way to go - you can't tell exactly when the image/block will appear if it depends on other non-fixed content (like text).
It may look simple and easy on a test page (where things you're testing are the only existing content), but it won't be like that on real page where those things are part of already existing layout.

Make things simple.

RISTMO · Aug 13, 2002

I guess I might have misunderstood the question. I thought that greygirl wanted to be able to have multiple states selected at once. IE. all states are there, but WA, OR, and CA are in red. If I was right, then to do it your way would require 3.04 X 10 to the 64th power images. That number seems a little bit too big, but I think it's accurate.
That's why I suggested flash.

For the part about the big script, I meant if there were 100 pics (50 grey states and 50 red) overlapping each other, and positioning how I was saying, it could get tricky. I wasn't insulting your code.

Rick if(($question=="has been bugging me"
AND $answer=="fixed the problem&quot

OR $answer=="really good post&quot

{
print("Star&quot

;
}else{
print("Thanks.&quot

;
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

When click a county in a list box can I color that county in a map?

greygirl

Programmer

RISTMO

Programmer

greygirl

Programmer

starway

Programmer

RISTMO

Programmer

starway

Programmer

Magnificat

Technical User

starway

Programmer

RISTMO

Programmer

Similar threads

Part and Inventory Search

Sponsor