Dynamic color in an imagemap

[mmcgon]

Let's say I have a web page that contains an image of the USA and a clickable image map that links to other pages based on the state that is clicked.

Is it possible to dynamically color some or all of the polygons in the image map to let the viewer know that they should click on certain states?

 

[tsdragon]

You could do what I did: download an outline-only version of the US and color the states yourself. Then get a simple image map program like MapEdit to create the image map polygons.

If you need it, when I get to work tomorrow I can get you a link where you can download the outline version of the US.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[mmcgon]

I want to color the states based on info that I pull out of a database using ASP/VBScript. I can use that to generate the Javascript to color the states on the fly, but I don't know if the coloring part is even possible.

 

[tsdragon]

I can't think of any method to do that using javascript or css. The states are part of a single image.

You might be able to pull that off using an image manipulation program on the server side, like ImageMagick, to take the outline US and fill the states, generating a temporary image file to display.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[mmcgon]

I was thinking that there might be a way to color the polygons in the imagemap that overlays the actual image, but I can't see a way to do it.

 

[manarth]

i saw this done - albeit a bit too 'hacky' for my liking...

you can access the coordinates of each area of the map. these are fed through a function which calculates how to represent this shape (circle|poly|rect) using the minimum number of rectangles. A div is created and displayed to represent each and every rectangle.

Personally, I'd rather use backend code to dynamically draw the image.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com

 

[theniteowl]

Here is an un-tested idea.
Cut each state out of the original making it it's own image and then use absolute positioning to place the images on the page. Use CSS Transparency to alter only the states needed OR all the states NOT needed.
Or perhaps transparency can be used?
Or float a colored transparency over the object?

Not sure what is possible with CSS, would have to play with it to see but if someone here has an idea if/how this could be done?

Alternatively, cut out copies of each state and color them.
Then float the colored version of the state over the flat map below when needed. If you were graphically creative you could give the appropriate states a 3d effect coming up off the map.


Paranoid? ME?? WHO WANTS TO KNOW????

 

[ca8msm]

I have a map of the UK that has certain regions on it. Each region is highlighted with a different colour when you mouse over them. The way I've implemented this (not sure if it's the best way or not!) is to have different images and replace them on mouseover. So, for example, I have:

1) A map of the UK with all regions defined (image1.jpg)
1) A map of the UK with all regions defined and region 1 coloured blue (image2.jpg)
1) A map of the UK with all regions defined and region 2 coloured green (image3.jpg)
etc etc

When the user moves their mouse over region 1, the original image (image1.jpg) is simply replaced with the second image (image1.jpg). I preload all of these images first and they are fairly small in size so it seems to work quite well.

Obviously, there may be a bit of work for you to do if you are going to be doing this for US states, but it seems to work fairly well for me.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.