I have an image and I want that each time I click on the image, it stores the diamter 0.25cm around the point where it was clicked and stores the coordinates.
I wrote a different code for this process but it uses asp:Literal plus it is a box and i dont know how to set the diameter so right now it selects the (x,y) coordinates. Also, the asp:literal box is visible to the user when clicking as a gridbox unless it doesnt store the coordinates. I do not want it to be visible.
Can anyone help with this issue.
This is my previous code.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style> .box { border: 1px dotted gray; position: relative; float: left; width: 18px; height: 18px; } .box:hover { border: 1px dotted gray; position: relative; float: left; background-color: aqua; width: 18px; height: 18px; } </style> <script type="text/javascript"> function recordClick(col, row) { document.getElementById('TextboxClicked').value += "|" + col + "," + row; //window.alert("Clicked col: " + col + " row: " + row); } </script> </head> <body> <form id="form1" runat="server"> <div> <div style="width: 331px; height: 451px; background-image: url('Images/image1.jpg'); "> <asp:Literal runat="server" ID="LiteralDivs"></asp:Literal> </div> <asp:TextBox runat="server" ID="TextboxClicked" ClientIDMode="Static" TextMode="MultiLine" Width="400px" Height="41px"></asp:TextBox><br /> </div> </form> </body> </html>
*** This code sets the boxes on the image.
namespace PilotTest { public partial class Registration : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { this.LiteralDivs.Text = ""; for (int i = 0; i < 19; i++) { for (int j = 0; j < 19; j++) { this.LiteralDivs.Text += "<div class='box' style= 'width: 15.4px; height: 20px;' onClick='recordClick(" + j.ToString() + "," + i.ToString() + ")'></div>"; } this.LiteralDivs.Text += "<div style='clear: both;'/>"; } } } }Is there a better way to do this?
Thanks
Kingsley