Javascript和图片地图?这如何运作? [英] Javascript and an image map? How this works?

问题描述

我制作了一张地图，并准备了一张表格.在表单中，我有三个文本字段.当我单击图像地图时.我单击数字4.数字4必须出现在文本字段"regio"中.

另一个例子.当我在数字地图上单击数字9时.数字9必须出现在文本区域"regio"中.

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

但是我该怎么做呢???? 谢谢!!!

解决方案

三件事:

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>

玩得开心&祝你好运:)

I have make a image map and have a form. In the form i have three text fields. When i click on the image map. I click on the number 4. The number 4 must come in the text field "regio".

A other example. When i click in the image map on the number 9. The number 9 must come in the textfield "regio".

Here is my code: http://www.testdomeinnaam.nl/mike/

But how can i make this???? Thank you !!!

解决方案

Three things:

1 - for every area you need to attach a firing event. Way one:

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

Way two:

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

Way three:

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

Note that this way takes the number of the region from the alt attribute - it's not the best way.

In the first two ways - you have to void(0) or return false to let the browser know you already handle the event yourself, and that you don't expect it to send the page away because of the user click.

2 - implement the regionMap methoid

Way one - pure JS

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

Way two - using jQuery

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

3 - add the implementation to your page

Way one: embed in your html page code

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

Way two - use JS resource. Create a file for example - regionsform.js, and in it :

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

And embed in your HTML a reference to it. Assuming the HTML and the regions.js are in the same folder - it would look like

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

Have fun & Good luck :)

这篇关于Javascript和图片地图?这如何运作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！