Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Location
    Kentucky
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Image maps with multiple selection - Possible?

    Hey, first time poster (pls take it easy with me )

    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,
    Donna

  • #2
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Donna77,

    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.
    2.) What you're suggesting is ok, but you've got some hard work ahead of you.
    3.) Check this link out to answer your question.

    Hope this helps,
    Beefa

  • #3
    New to the CF scene
    Join Date
    Apr 2006
    Location
    Kentucky
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Beefa,

    Thanks so much for your help and I appreciate you signing up to help me 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...
    Donna.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •