Using images / links to switch form select (dropdown)

I'm building a form for a client and they've requested a map of the city to let visitors visually pick their location, and have that link to the City: Dropdown/Select area of the Form.

Here's the clients old, archaic & disgusting website showcasing what they want done, seriously though, it's terrible. http://www3.telus.net/russellsrubbish/order_form.htm

I was 开发者_如何学编程looking at this Hidden Form Value Change and I'm unsure if this would be pushing in the right direction?

If I failed to explain myself properly I apologize, I'm pretty novice when it comes to jQuery.

To make this work i would make a background sprite with a map and use image maps. Just use jquery to react on clicking one of the hotspots and change the selected index in your select box.

---------------------------------------- EDIT - Working example ------------------------------

Heres a working example i made for you: Example You can click 2 regions in the netherlands on the map, "noord-brabant" and "gelderland".

HTML:

<div class="mymap">
  <img alt="" src="map_overlay.png" usemap="#holland">
</div>

<map id="mymap" name="holland">
  <area shape="circle" coords="280,230,30" alt="gelderland" />
  <area shape="circle" coords="200,300,30" alt="brabant" />
</map>

<select class="mymapselect">
  <option value="none">Take a pick on the map</option>
  <option value="brabant">brabant</option>
  <option value="gelderland">gelderland</option>
</select>

Css:

  .mymap {
    background: url('map.png');
    width: 393px;
    height: 449px;
  }

  .mymap.brabant {
    background-position: -393px 0;
  }

  .mymap.gelderland {
    background-position: -786px 0;
  }

JS:

<script type="text/javascript">
    $('area', '#mymap').mouseover(function(){
      $('.mymap').attr('class', 'mymap ' + $(this).attr('alt'));
    });
    $('area', '#mymap').mouseout(function(){
      $('.mymap').attr('class', 'mymap');
    });
    $('area', '#mymap').click(function(){
      $(".mymapselect").val($(this).attr('alt'));
    });
</script>

So what i actually did is make a sprite with the background images for the map. Use a transparent img so we can add our image maps and make hovers on the area's change a class based upon the alt attribute. You just need to add styling for all regions and make the sprite move.

Hope this helps :)

If you're looking to convert the javascript the old form is using to jQuery you could do something like this...

html:

...
<map name="zones" id="zones">
    <area shape="poly" coords="23,47,26,85,64,103,157,48,129,19,70,19" alt="Richmond">
...
</map>

jQuery script:

$('#zones area').each(function() {
    $(this).click(function(e) {
        $('#city').val($(this).attr('alt'));
    });
});

you'll need to give the city dropdown an id="city" and make sure the area element's alt tag matches the city drop down value

If possible you can use a CSS image map in leiu of an image map with map/area elements. A CSS image map will give you the option to use a hover effect. See more on A List Apart: Articles: Night of the Image Map. Some may even say image maps using map/area elements are a dying breed.