Marking on Image

r_ganesh76 · May 10th, 2006, 01:58 AM

Hi Experts,

I am working on a project which manages our office space. I have an image of the office layout and I want to mark the co-ordinates as and when the user clicks and store it to a database.

Can anyone tell me which is the easiest way of doing this?

Thanking in advance

Regards
Ganesh
http://ganeshprof.blogspot.com

braindead · May 11th, 2006, 01:10 PM

It is helpful to know which browser you are using. For IE 6, the following will work.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Test Filter</title>
    <script language="javascript">
        function Image_Click ()
        {
            alert ("(" + window.event.offsetX + ", " + window.event.offsetY + ")");
        }
    </script>
</head>
<body>

    <img src='<< your path here>>' onclick="Image_Click();" />

</body>
</html>

You have a few choices on how to save the data once gathered:

1. Put those coords into hidden fields and post the page.
   It might be annoying for the page to disappear and redraw after every click...

2. Use a hidden iframe to do the same thing, only the iframe gets posted, not the whole page.
   If the user clicks quickly, the iframe may not have reloaded before the next input, so an error will occur. Also, this is really only an IE solution.

3. Setup a web-service that can listen for XML HTTP requests and save the coords as needed.
   This is a super-slick solution that is somewhat complicated. Fortunately, a Web service is easy to setup in ASP.NET 2.0. You might start with http://msdn.microsoft.com/msdnmag/is...e/default.aspx

Brandon