[求助]怎么返回一个图片上鼠标所点的点坐标?
想做一个简单的鼠标点击点和已知点(图片上两点)的距离计算,如果在程序中就好做了,不过在网页中就有点蒙了.或者用其他方法能实现也可以,如利用层的位置做.
可是我对层的应用又不是很了解,希望大家帮帮忙,谢谢先!~
2006-10-16 11:12
2006-10-16 11:14
2006-10-16 11:17
2006-10-16 11:21
2006-10-16 11:27
一个简单的示意 不知道是不是这个意思
<script>
var x1,y1,x2,y2,ju,k;
k=0;
function ccc(){
var x,y;
if(k>1) k=0;
if(k==0){
x1=event.clientX;
y1=event.clientY;
}
else
{
x2=event.clientX;
y2=event.clientY;
}
if(k==1)
{
x=x2-x1;
y=y2-y1;
ju=formatNumber(Math.sqrt(x*x+y*y),"#,###.00");
alert("两点坐标：("+x1+","+y1+")("+x2+","+y2+")\n两点距离："+ju+"像素");
x1=0;x2=0;y1=0;y2=0;
}
k++;
}
//格式化数字函数
function formatNumber(number,pattern){
var str = number.toString();
var strInt;
var strFloat;
var formatInt;
var formatFloat;
if(/\./g.test(pattern)){
formatInt = pattern.split('.')[0];
formatFloat = pattern.split('.')[1];
}else{
formatInt = pattern;
formatFloat = null;
}
if(/\./g.test(str)){
if(formatFloat!=null){
var tempFloat = Math.round(parseFloat('0.'+str.split('.')[1])*Math.pow(10,formatFloat.length))/Math.pow(10,formatFloat.length);
strInt = (Math.floor(number)+Math.floor(tempFloat)).toString();
strFloat = /\./g.test(tempFloat.toString())?tempFloat.toString().split('.')[1]:'0';
}else{
strInt = Math.round(number).toString();
strFloat = '0';
}
}else{
strInt = str;
strFloat = '0';
}
if(formatInt!=null){
var outputInt = '';
var zero = formatInt.match(/0*$/)[0].length;
var comma = null;
if(/,/g.test(formatInt)){
comma = formatInt.match(/,[^,]*/)[0].length-1;
}
var newReg = new RegExp('(\\d{'+comma+'})','g');
if(strInt.length<zero){
outputInt = new Array(zero+1).join('0')+strInt;
outputInt = outputInt.substr(outputInt.length-zero,zero)
}else{
outputInt = strInt;
}
var
outputInt = outputInt.substr(0,outputInt.length%comma)+outputInt.substring(outputInt.length%comma).replace(newReg,(comma!=null?',':'')+'$1')
outputInt = outputInt.replace(/^,/,'');
strInt = outputInt;
}
if(formatFloat!=null){
var outputFloat = '';
var zero = formatFloat.match(/^0*/)[0].length;
if(strFloat.length<zero){
outputFloat = strFloat+new Array(zero+1).join('0');
//outputFloat = outputFloat.substring(0,formatFloat.length);
var outputFloat1 = outputFloat.substring(0,zero);
var outputFloat2 = outputFloat.substring(zero,formatFloat.length);
outputFloat = outputFloat1+outputFloat2.replace(/0*$/,'');
}else{
outputFloat = strFloat.substring(0,formatFloat.length);
}
strFloat = outputFloat;
}else{
if(pattern!='' || (pattern=='' && strFloat=='0')){
strFloat = '';
}
}
return strInt+(strFloat==''?'':'.'+strFloat);
}
</script>
<img src="http://www.yingkou-window.com/images/tu2.jpg" width="100%" onclick="return ccc()" />
[此贴子已经被作者于2006-10-16 12:05:24编辑过]
2006-10-16 11:44
又修改了一下 效果好点
<script>
var x1,y1,x2,y2,ju,k,top,left;
k=0;
function ccc(){
var x,y;
if(k>1) k=0;
if(k==0){
x1=event.clientX-left;
y1=event.clientY-top;
document.all.d1.style.left=x1-1;
document.all.d1.style.top=y1-1;
document.all.d1.style.display="";
}
else
{
x2=event.clientX-left;
y2=event.clientY-top;
document.all.d2.style.left=x2-1;
document.all.d2.style.top=y2-1;
document.all.d2.style.display="";
}
if(k==1)
{
x=x2-x1;
y=y2-y1;
ju=formatNumber(Math.sqrt(x*x+y*y),"#,###.00");
alert("两点坐标：("+x1+","+y1+")("+x2+","+y2+")\n两点距离："+ju+"像素");
x1=0;x2=0;y1=0;y2=0;
document.all.d1.style.display="none";
document.all.d2.style.display="none";
}
k++;
}
//格式化数字函数
function formatNumber(number,pattern){
var str = number.toString();
var strInt;
var strFloat;
var formatInt;
var formatFloat;
if(/\./g.test(pattern)){
formatInt = pattern.split('.')[0];
formatFloat = pattern.split('.')[1];
}else{
formatInt = pattern;
formatFloat = null;
}
if(/\./g.test(str)){
if(formatFloat!=null){
var tempFloat = Math.round(parseFloat('0.'+str.split('.')[1])*Math.pow(10,formatFloat.length))/Math.pow(10,formatFloat.length);
strInt = (Math.floor(number)+Math.floor(tempFloat)).toString();
strFloat = /\./g.test(tempFloat.toString())?tempFloat.toString().split('.')[1]:'0';
}else{
strInt = Math.round(number).toString();
strFloat = '0';
}
}else{
strInt = str;
strFloat = '0';
}
if(formatInt!=null){
var outputInt = '';
var zero = formatInt.match(/0*$/)[0].length;
var comma = null;
if(/,/g.test(formatInt)){
comma = formatInt.match(/,[^,]*/)[0].length-1;
}
var newReg = new RegExp('(\\d{'+comma+'})','g');
if(strInt.length<zero){
outputInt = new Array(zero+1).join('0')+strInt;
outputInt = outputInt.substr(outputInt.length-zero,zero)
}else{
outputInt = strInt;
}
var
outputInt = outputInt.substr(0,outputInt.length%comma)+outputInt.substring(outputInt.length%comma).replace(newReg,(comma!=null?',':'')+'$1')
outputInt = outputInt.replace(/^,/,'');
strInt = outputInt;
}
if(formatFloat!=null){
var outputFloat = '';
var zero = formatFloat.match(/^0*/)[0].length;
if(strFloat.length<zero){
outputFloat = strFloat+new Array(zero+1).join('0');
//outputFloat = outputFloat.substring(0,formatFloat.length);
var outputFloat1 = outputFloat.substring(0,zero);
var outputFloat2 = outputFloat.substring(zero,formatFloat.length);
outputFloat = outputFloat1+outputFloat2.replace(/0*$/,'');
}else{
outputFloat = strFloat.substring(0,formatFloat.length);
}
strFloat = outputFloat;
}else{
if(pattern!='' || (pattern=='' && strFloat=='0')){
strFloat = '';
}
}
return strInt+(strFloat==''?'':'.'+strFloat);
}
</script>
<style type="text/css">
<!--
#d1 {
position:absolute;
width:3;
height:3;
z-index:1;
background-color: #0066ff;
overflow: hidden;
}
#d2 {
position:absolute;
width:3;
height:3;
z-index:2;
background-color: #FF0000;
overflow: hidden;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<div id="d1" style="display:none"></div>
<div id="d2" style="display:none"></div>
<img id="pic" src="/P_S_L_77/2006-6/20066121847972949.jpg" width="100%" onclick="return ccc()" />
<script>
top=document.getElementById("pic").offsetTop;
left=document.getElementById("pic").offsetLeft;
</script>
2006-10-16 12:12
2006-10-16 12:26
2006-10-16 12:44
2006-10-16 13:33
