ninedoors Posted June 26, 2007 Share Posted June 26, 2007 I'm new to javascript and I'm having trouble with the write Text function. I have an image on my webpage that have 40 or so numbers on it. What I have done is create a hotspot around each number. The reason for this is that I want to be able to click on any given number in the image and have that number written in the text box on the webpage. Is the writeText function the right approach? Here is the code I have: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Barrie Mens Hockey League</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .style1 { font-size: 24px; font-weight: bold; } .style3 { font-size: 12px; font-weight: bold; } --> </style> </head> <body> <div align="center"> <table width="57%" height="566" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="34" colspan="2"><div align="center" class="style1">Stat Form </div></td> </tr> <tr> <td height="30" colspan="2"> </td> </tr> <tr> <td width="59%" height="502"><div align="center"> <form name="statform" method="post" action=""> <table width="98%" height="129" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="30%" height="43"><div align="left"><strong>Home Players : </strong></div></td> <td><input name="boxName" type="text" id="boxName" size="50"></td> </tr> <tr> <td height="43"> </td> <td> </td> </tr> <tr> <td height="43"> </td> <td><input type="submit" name="Submit" value="Submit"></td> </tr> </table> </form> </div></td> <td width="41%"> <div align="left"><img src="../images/statform1.jpg" width="324" height="327" border="0" usemap="#Map"></div></td> </tr> </table> </div> <map name="Map"> <area shape="rect" coords="22,66,47,93" href="javascript:onClick = writeText(boxName,'1,')"> <SCRIPT LANGUAGE="JavaScript"> function writeText(boxName, newText) { // Build the reference to the text box var myBox = eval("document.statform." + boxName); // Concatenate the new text to the end of the current text // (The /n is a carriage return) myBox.value = myBox.value + "\n" + newText; } </SCRIPT> <area shape="rect" coords="61,66,91,97" href="#"> <area shape="rect" coords="104,66,133,98" href="#"> <area shape="rect" coords="143,65,177,99" href="#"> <area shape="rect" coords="188,65,217,97" href="#"> <area shape="rect" coords="230,64,258,99" href="#"> <area shape="rect" coords="272,63,300,97" href="#"> <area shape="rect" coords="269,104,302,131" href="#"> <area shape="rect" coords="269,139,302,170" href="#"> <area shape="rect" coords="230,103,258,133" href="#"> <area shape="rect" coords="185,101,219,133" href="#"> <area shape="rect" coords="186,137,220,168" href="#"> <area shape="rect" coords="226,140,262,167" href="#"> <area shape="rect" coords="269,175,302,203" href="#"> <area shape="rect" coords="268,207,302,240" href="#"> <area shape="rect" coords="269,246,302,274" href="#"> <area shape="rect" coords="268,281,303,312" href="#"> <area shape="rect" coords="227,283,261,312" href="#"> <area shape="rect" coords="224,247,261,276" href="#"> <area shape="rect" coords="223,210,261,241" href="#"> <area shape="rect" coords="225,173,261,204" href="#"> <area shape="rect" coords="184,173,219,204" href="#"> <area shape="rect" coords="185,210,218,241" href="#"> <area shape="rect" coords="184,247,219,276" href="#"> <area shape="rect" coords="184,280,218,314" href="#"> <area shape="rect" coords="22,101,47,130" href="#"> <area shape="rect" coords="18,137,54,168" href="#"> <area shape="rect" coords="61,105,87,134" href="#"> <area shape="rect" coords="100,100,139,135" href="#"> <area shape="rect" coords="141,103,176,135" href="#"> <area shape="rect" coords="145,139,177,170" href="#"> <area shape="rect" coords="143,176,177,206" href="#"> <area shape="rect" coords="102,140,135,169" href="#"> <area shape="rect" coords="62,137,93,168" href="#"> <area shape="rect" coords="59,175,92,205" href="#"> <area shape="rect" coords="59,210,93,239" href="#"> <area shape="rect" coords="58,245,92,277" href="#"> <area shape="rect" coords="56,281,95,314" href="#"> <area shape="rect" coords="19,282,50,313" href="#"> <area shape="rect" coords="16,245,51,276" href="#"> <area shape="rect" coords="15,206,51,240" href="#"> <area shape="rect" coords="16,176,51,202" href="#"> <area shape="rect" coords="101,177,134,203" href="#"> <area shape="rect" coords="103,212,132,240" href="#"> <area shape="rect" coords="143,212,176,241" href="#"> <area shape="rect" coords="143,248,176,276" href="#"> <area shape="rect" coords="101,248,135,277" href="#"> <area shape="rect" coords="103,284,133,310" href="#"> <area shape="rect" coords="142,283,176,312" href="#"> </map> </body> </html> I will eventually will use the submit button to enter the the values in a database. Also, I want to have the number entered be followed by a comma. This is because I want to enter multiple entries in the text box so they need to be separated by a comma. Hope someone can help. I also attached a snapshot of the webpage so you can see exactly what it looks like. Nick [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
emehrkay Posted June 26, 2007 Share Posted June 26, 2007 im pretty sure that the area tag allows for onclick events so youd do onclick="functionname(vars);" js: functionname(vars){ //do stuff } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.