javascript - 带有引用表单值的 javascript 的图像映射区域

标签 javascript html forms imagemap

我正在尝试创建一个充当向上/向下增量器/减量器控件的图像映射。该图像是一个简单的 16x16 png 文件,有两个三 Angular 形(一个朝上,另一个朝下),图像的上半部分表示向上(递增),下半部分表示向下(递减)。

下面的代码说明了我在引用表单值的图像映射区域的 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>

最佳答案

我认为错误在于在区域元素中使用 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>

问候

关于javascript - 带有引用表单值的 javascript 的图像映射区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13212234/

相关文章:

javascript - 具有 apache 别名的已用服务人员无法正常工作

html - Bootstrap - 如何让卡片在搜索栏和视口(viewport)底部之间垂直居中?

javascript - 编写功能测试,HTML5 视频标签

javascript - AngularJS 对动态生成的输入指令的表单验证不适用于 ngForm

javascript - JQuery/Django 有办法构建 "click the text to edit"吗?

javascript - 将 jQuery 动画转换为 React Hook

javascript - 视觉 : Import router in helper class and push route

javascript - asp.net mvc 将参数从 Jquery ajax 调用传递到 Controller

javascript - 检测列表是否为空

Java Servlet 以状态码 HTTP/500 运行