1

さまざまな領域のHTML/PHPの画像があります。上の入力フィールドを変更したい領域の1つをクリックすると。それ、どうやったら出来るの？通常の$variableを使用しようとしていますが、それも機能しません。

私はHTMLに非常に慣れていません。

前もって感謝します！

<input type="text" name="position" size="10" value="">

<img style="margin: 50px 500px" src="pic.jpg" width="500" height="200" alt=":("
usemap="#cabmap" />

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" *something here mby?* />



<html>
<head>
<title>Pos</title>
</head>

<body>

<form method="post" action="process.php">
<fieldset>
<legend><strong>ChosePos</strong></Legend>

<td style="padding-left: 40px"><b>Position</b></td>
<input id="position" type="text" name="position" size="10" value="Hellope"</input>
<br />
<img src="pic.jpg" width="500" height="200" alt="Position map" usemap="#map" />
<map name="map">
  <area shape="rect" coords="0,0,82,126" alt="CA1" onclick="javascript:simply();" />
  <script type="text/javascript">
    function simply(){
    var box = document.getElementById("position");
    box.value="Hello";
  </script>

  </map>


</fieldset>

<input style="pading-top: 20px" type="submit" value="Send report" />



</form>
</body>
</html>

今、私はここまで到達しましたが、その領域をクリックしても何も起こりません...

何が悪いのかわかりません。Plzは私を助けます。

4

2 に答える 2

2

はい、外部JavaScriptライブラリjQueryを使用してこれを行うことができます：

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" onclick="$('#position').val('Hello')"/>

または、プレーンJavaScriptを使用してこれを行うことができます。

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" onclick="javascript:simply();"/>
<script type="text/javascript">
function simply(){
 var box = document.getElementById("position");
 box.value="Hello"; 
}    
</script>

また、テキストボックスにid属性を追加することを忘れないでください。

于 2012-07-25T07:46:03.240 に答える
0

更新-これがまだ「正解」としてマークされている場合...

私の答えは、user1474090によって提案された変更を実装するときに導入されたエラーに基づいていることをOPに説明しようとしました。その結果、user1474090からの回答を「正しい」ものとしてマークする必要があります...これではありません。

元の回答

更新された質問への回答として、いくつかの構文エラーがあります。

まず、あなたの<input id="position"フォーマットが悪いので、変更してください...

<input id="position" type="text" name="position" size="10" value="Hellope"</input>

次の2行のいずれかに...

<input id="position" type="text" name="position" size="10" value="Hellope"></input>
<input id="position" type="text" name="position" size="10" value="Hellope"/>

第二に、JavaScript関数には中括弧がない}ので、変更してください...

<script type="text/javascript">
  function simply(){
  var box = document.getElementById("position");
  box.value="Hello";
</script>

に...

<script type="text/javascript">
  function simply(){
    var box = document.getElementById("position");
    box.value="Hello";
  }
</script>

<script>また、ブロックをの<head>一部ではなく、ページのセクションに移動することをお勧めします<body>。これは機能するために不可欠ではありませんが、ページにスクリプトを含めるための推奨される方法です。

また、Firefox用のFireBugを徹底的に推奨することも、ChromeとIE8 / 9（両方ともF12）の開発者向けコンポーネントを使用することもできます。これらにより、このような問題をすばやく見つけることができます。

于 2012-07-25T09:56:05.970 に答える