JavaScript 和图像映射？这是如何运作的？

Question

我已经制作了图像 map 并有一个表格。在表单中我有三个文本字段。当我点击图像映射时。我单击数字 4。数字 4 必须出现在文本字段“regio”中。

另一个例子。当我在图像映射中单击数字 9 时。数字 9 必须出现在文本字段“regio”中。

这是我的代码:http://www.testdomeinnaam.nl/mike/

但是我怎样才能做到这一点呢？？？ 谢谢!!!

Answer 1

三件事:

1 - 对于每个区域，您需要附加一个触发事件。 方式一:

<area ... href="JavaScript: regionMap(6); void(0);" >

方式二:

<area ... onclick="regionMap(6); return false;">

方式三:

<script>
   jQuery("#imagemap area").click( function(){ 
        var s = jQuery(this).attr("alt");
        regionMap( s.substr(s.length - 2) );
   });
</script>

请注意，这种方式从 alt 属性中获取区域编号 - 这不是最好的方式。

在前两种方式中 - 您必须 void(0) 或 return false 让浏览器知道您已经自己处理了该事件，并且您没有这样做不要期望它会因为用户点击而将页面发送出去。

2 - 实现regionMap方法

方式一 - 纯 JS

   function regionMap(region) {
      document.getElementById("regio").value = region;
   }

方法二 - 使用 jQuery

   function regionMap(region) {
      jQuery("#regio").val(region);
   }

3 - 将实现添加到您的页面

方式一:嵌入 html 页面代码

<script>
   function regionMap(region) {
      document.getElementById("regio").value = region;
   }
</script>

方式二 - 使用 JS 资源。 创建一个文件，例如 - regionsform.js，并在其中:

   function regionMap(region) {
      document.getElementById("regio").value = region;
   }

并在 HTML 中嵌入对其的引用。 假设 HTML 和 Regions.js 位于同一文件夹中 - 它看起来像

<script src="regionsform.js"></script>

玩得开心，祝你好运:)