Imagemap In Html Form

Imagemap In Html Form
I need to implement an imagemap into a html form like the one on this page:
http://www.boligportal.dk/lejebolig/soeg_leje_bolig.php

You can also see an example of the implemetation here:
http://lejebolig.dk/

Here is how it works:

The user clicks on a region on the map.
The user get a choice of zipcodes, that corresponds to the region.
The available zipcodes are to the left, the selected zipcodes are to the right.
The default choice is “All Zipcodes”.
When a user clicks on a zipcode it moves from Available to Selected or vice versa.
The user can also mark the zipcode (which get higlighted) and press on a button to either select or deselect the zipcode.
There is a button so the user can select or deselect all zipcodes in the region.
There is abutton so the user can get back to the map and chose another region.

The selected zipcodes are to be used in a form. The user also has to select other values that are to be used to make a search. The user should be able to select the zipcodes and move on to the others fields in the form without a page refresh or moving on to a new page.

Important:
Some of the zipcodes are “grouped” together. For example:
When the user selects 1500-1799 København V, several values are to be sent in the form (1500, 1505, 1700, etc). So several values are to be sent through the form but the user only has to select one value.

The imagemap and form has to be coded from scratch. Copies of code from the two provided examples will not be accepted due to copyright issues.

I will provide a list of the zipcodes to be related to each area.

I can also provide a image that can be used as a basis for the imagemap.

Leave a Reply

Your email address will not be published. Required fields are marked *