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>

玩得开心，祝你好运:)