1

我有一个不同区域的 HTML/PHP 图像。当我单击我希望上面的输入字段更改的区域之一时。我怎么做？尝试使用普通的 $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>

现在我已经走了这么远，但是当我点击该区域时没有任何反应......

我不知道出了什么问题。请帮助我。

4

2 回答 2

2

Yes you can do this using the external JavaScript library jQuery:

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

Or you can do this with plain 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>

Also remember to add a id attribute to your text box.

于 2012-07-25T07:46:03.240 回答
0

更新- 如果这仍然被标记为“正确”的答案......

我尝试向 OP 解释我的答案是基于他们在实施 user1474090 建​​议的更改时引入的错误。因此，他们应该将来自 user1474090 的答案标记为“正确”答案……而不是这个答案。

原始答案

针对您更新的问题，您有几个语法错误。

首先，您<input id="position"的格式错误，因此请更改...

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

进入以下两行之一...

<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 回答