1

上/下のインクリメント/デクリメンターコントロールとして機能する画像マップを作成しようとしています。この画像は単純な16x16pngファイルで、2つの三角形（1つは上向き、もう1つは下向き）があり、画像の上半分は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

いくつかの問題があります：

  • DOM要素がJavascriptを介して不適切にアクセスされています。
  • 新しい値が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

エラーは、area要素内での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 
<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 に答える