I have an image in HTML/PHP with different areas. When I click on one of the areas I want my input field above to change. How do I do that? Trying to use a normal $variable but I dont get that to work either.
I am very new to HTML.
Thanks in advance!
<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>
Now have I've gotten this far but nothin happens when i click on the area...
I have no idea whats wrong. Plz help me.
UPDATE - if this is still marked as the "correct" answer...
I have tried explaining to the OP that my answer was based on the errors they had introduced when implementing the changes suggested by user1474090. And as a result, they should mark the answer from user1474090 as the "correct" one... and not this one.
Original Answer
In response to your updated question, you have a couple of syntax errors.
Firstly, your <input id="position" is badly formatted, so change...
<input id="position" type="text" name="position" size="10" value="Hellope"</input>
Into one of the following two lines...
<input id="position" type="text" name="position" size="10" value="Hellope"></input>
<input id="position" type="text" name="position" size="10" value="Hellope"/>
Secondly, your JavaScript function doesn't have a close brace }, so change...
<script type="text/javascript">
function simply(){
var box = document.getElementById("position");
box.value="Hello";
</script>
To...
<script type="text/javascript">
function simply(){
var box = document.getElementById("position");
box.value="Hello";
}
</script>
I would also suggest that you move the <script> block into the <head> section of your page, rather than being part of the <body>. This is not vital for it to work, but it is the preferred way of having scripts in your page.
And I can thoroughly recommend FireBug for Firefox or use the developer components in Chrome and IE8/9 (F12 for both). These would very quickly allow you find issues like this.