1

我正在尝试创建一个充当上/下增量器/减量器控件的图像映射。该图像是一个简单的 16x16 png 文件，其中包含两个三角形（一个向上，另一个向下），图像的上半部分为 UP（增量），下半部分为 DOWN（减量）。

下面的代码说明了我在引用表单值的图像映射区域的 href 时遇到的问题。我很困惑为什么对警报函数的调用有效，而使用表单值进行实际递增/递减的代码却失败了。我打算实现的实际代码会更复杂，但在深入之前我需要克服这个障碍或改变方法。

因此，我想知道这种方法是否确实可行，以及我的场景中是否可能缺少一些小东西，或者这可能是一种错误的尝试，试图以另一种方式更好地完成某些事情。我还要承认我在客户端编程方面的相对新手地位（好像这并不明显），并提前感谢大家的温柔和建设性的指导。

<html>
 <head>
  <title>ImageMap Test</title>
 </head>
 <body>
  <form>
   <fieldset>
    <legend>ImageMap area href for javascript works for alerts:</legend>
    <input type='text' name='foo1_filter' size='25' value='123' />
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo1' />
    <map name='foo1'>
     <area shape='rect' coords='0,0,15,7' href='javascript:alert("UP");' />
     <area shape='rect' coords='8,0,15,15' href='javascript:alert("DOWN");' />
    </map>
   </fieldset>
  </form>
  <p />
  <form>
   <fieldset>
    <legend>ImageMap area href for javascript does not work when referencing form values:</legend>
    <input type='text' name='foo2_filter' size='25' value='123' />
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo2' />
    <map name='foo2'>
     <area shape='rect' coords='0,0,15,7' href='javascript:this.form.foo2_filter.value++;' />
     <area shape='rect' coords='8,0,15,15' href='javascript:this.form.foo2_filter.value--;' />
    </map>
   </fieldset>
  </form>
 </body>
</html>
4

3 回答 3

0

我认为错误在于在区域元素中使用 this.form 。.form 属性只能在单击/使用表单元素（如输入、字段等）时使用。尝试执行以下操作：

  1. 为表单添加名称，例如：my_form
  2. 将“this.form”更改为“document.my_form”

就像是

<form name="my_form">
  <fieldset>
    <legend>ImageMap area href for javascript does not work when referencing form values:</legend>
    <input type='text' name='foo2_filter' size='25' value='123' />
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo2' />
    <map name='foo2'>
      <area shape='rect' coords='0,0,15,7' href='javascript:document.my_form.foo2_filter.value++;' />
      <area shape='rect' coords='8,0,15,15' href='javascript:document.my_form.foo2_filter.value--;' />
    </map>
  </fieldset>
</form>

问候

于 2012-11-03T18:43:41.090 回答
0

有几个问题：

  • 通过 Javascript 不正确地访问 DOM 元素。
  • 新值永远不会分配给 DOM 元素。
  • Javascript是内联的。注意*这更像是一个标准问题。

尝试按如下方式设置值：

<area shape='rect' coords='0,0,15,7' href='javascript:document.forms[0].elements["foo2_filter"].value = --document.forms[0].elements["foo2_filter"].value;' />

关于此代码的一些注意事项。

  • 使用--前缀递减运算符，以便在赋值之前减少值。
  • =运算符用于为 DOM 元素的 value 属性分配递减的值。

看看这个关于表单中引用 DOM 元素的页面： http ://www.javascript-coder.com/javascript-form/javascript-get-form.phtml

于 2012-11-03T18:46:26.997 回答
0 
<form name="fooForm2">
  <fieldset>
    <legend>ImageMap area href for javascript referencing form values:</legend>
    <input type='text' name='foo2_filter' size='25' value='123' />
    <img src='../img/arrow_up-down.png' title='Up-Down' usemap='#foo2' />
    <map name='foo2'>
      <area shape='rect' coords='0,0,15,7' href='#' onclick='javascript:document.fooForm2.foo2_filter.value++; return false' />
      <area shape='rect' coords='0,8,15,15' href='#' onclick='javascript:document.fooForm2.foo2_filter.value--; return false' />
    </map>
  </fieldset>
</form>

感谢 Andrea 和 kmb385 的建议。结果，现在一切都按预期工作。我为使其正常工作所做的更改是：

  1. 明确引用了表单名称
  2. 设置 href='#'
  3. 将 javascript 操作放入 onclick
  4. 使用了正确的 DOM 元素引用
  5. 图像地图底部的固定区域坐标
于 2012-11-04T02:33:36.147 回答