Question

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.

Answer 1

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 🙂