View Full Version : CSS Image maps with multiple selection - Possible?

04-30-2006, 08:26 AM
Hey, first time poster (pls take it easy with me :o )

I am attempting to create an image map of London that will allow a user to select any number of areas (actually postcodes) before being posted back to the server. The ideal solution would be a map where any defined region that the user clicked on would change color to show that it was selected. The user could continue to select any number of regions before posting the form.

An example of the map I am using is at http://www.londontown.com/LondonPC

I'm no expert on CSS or image maps, but I have the enthusiasm to learn whatever I have to in order to get this working. I would truly apreciate it if someone could advise me on;

a) Is this possible? If so, do you know of anywhere it has been done?
b) Is what I describe the best way to do this (collect multiple values from an image map)
c) Where do I start, what are the components that I need to know to do this?

Best regards,

04-30-2006, 11:49 AM

Just signed up here. Was actually looking for help with my PHP database and decided to poke around here. Im actually a highly respected member at www.htmlforums.com but I signed up to help you with your problem.

1.) It is possible. Check out this link here (http://www.harveynorman.com.au/storeLocations.tho).
2.) What you're suggesting is ok, but you've got some hard work ahead of you.
3.) Check this link out (http://www.extension.iastate.edu/HTML/IMAP/) to answer your question.

Hope this helps,

04-30-2006, 09:02 PM

Thanks so much for your help and I appreciate you signing up to help me :thumbsup: But I dont think I have explained myself well enough...

I am creating an app which allows people to search for properties in different areas of London. The postal codes are an index for the areas in London and most people prefer to select areas using the postcodes. So what I need is to have a page where users can choose an arbitary number of postcodes to search (just like they would by holding down control and selecting them from a list box), but I want to do it using an image map. When a user select a postcode area, that postcode would be added to an array and returned when the form was posted. To show the user what she has selected, when a postcode areas has been selected, the area would need to change color. (Ideally she could also toggle selection)

So, anyone seen this before or have any clues where to start? I am very familiar with creating standard image maps and am also OK with CSS layouts, but I have no clue how to do this....

Any help is much appreciated...

04-30-2006, 09:45 PM
I would think it would be possible to do this in conjunction with JavaScript; however due to the complexity of your map I believe this would be rather impractical. First you would have to map out each area carefully by coordinates and then you'd have to create one image to overlay every region by positioning. If your base image changed you'd have to do this all over again.

A better solution would probably be to use something like Flash or perhaps a Java applet. SVG images could also probably do it but wide-spread support for that standard is a ways into the future.