Question

我正在为客户建立一个表单，他们已经请求了一个城市地图，让访问者可以直观地选择他们的位置，并拥有指向城市的链接：表格的下拉/选择区域。

这是老客户，老客户和老客户。令人作呕的网站展示了他们想要做的事情，但是，这很可怕。 http://www3.telus.net/russellsrubbish/order_form.htm

我正在看这个Hidden Form Value Change，我不确定这是否会朝着正确的方向发展？

如果我没有正确解释自己，我道歉，在jQuery方面我很新手。

Answer 1

为了完成这项工作，我将使用地图制作背景精灵并使用image maps。只需使用jquery在点击其中一个热点时做出反应，并在选择框中更改所选索引。

----------------------------------------编辑 - 工作示例--- ---------------------------

这是我为你做的一个实例：Example 您可以在地图上点击荷兰的2个地区，“noord-brabant”和“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>

所以我实际上做的是用地图的背景图像制作一个精灵。使用透明的img，这样我们就可以添加我们的图像映射，并根据alt属性在区域上进行更改。您只需要为所有区域添加样式并使精灵移动。

希望这会有所帮助：）

Answer 2

如果您希望将旧表单用于jQuery转换为jQuery，您可以执行以下操作...

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脚本：

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

你需要给城市下拉列表id =“city”并确保area元素的alt标记符合城市下拉值

如果可能，您可以在带有地图/区域元素的图像地图的leiu中使用CSS图像映射。 CSS图像映射将为您提供使用悬停效果的选项。有关A List Apart: Articles: Night of the Image Map的更多信息，请参阅。有些人甚至可能会说使用地图/区域元素的图像地图是一种垂死的品种。

使用图像/链接切换表单选择（下拉列表）

2 个答案: