How to Get Both x- and y Coordinates of an Image Map in ONE Text Field?_问答_开发者

How to Get Both x- and y Coordinates of an Image Map in ONE Text Field?

开发者 https://www.devze.com 2023-02-18 21:33 出处：网络

I\'m using a simple Javascript to generate both the x- and y-coordinates of an image map: <script language=\"JavaScript\">

I'm using a simple Javascript to generate both the x- and y-coordinates of an image map:

<script language="JavaScript">
                function point_it(event){
                pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
                pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
                document.pointform.form_x.value = pos_x;
                document.pointform.fo开发者_Python百科rm_y.value = pos_y;
                }
        </script>

With "form_x" and "form_y" having different text fields in the body. However, I'd like to have both outputs (pos_x, pos_y) in one text field. Separated by a semicolon or so. Is this possible & can anyone help?

Thanks much for your input.

Joël

Try this, assuming your new form text field is named form_xy:

document.pointform.form_xy.value = pos_x + ',' + pos_y;

<html>
<head>
<script language="JavaScript">
function point_it(event){
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;

document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;

}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('image.jpg');width:500px;height:333px;">

</div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form> 
</body>
</html>