我正在尝试创建一个充当向上/向下增量器/减量器控件的图像映射。该图像是一个简单的 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 属性只能在单击/使用表单元素(例如输入、字段等)时使用。请尝试执行以下操作:
- 向表单添加名称,例如:my_form
- 将“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/