首页 新闻 赞助 找找看

救命!救命,十万火急,客户端如何在网页中的imagebutton按钮上画矩形框?用Javascrip

0
悬赏园豆:30 [已关闭问题] 关闭于 2008-11-12 08:40

我在ASP.NET网页中用imagebutton控件显示了一个图片,现在当用户用鼠标在图片上画矩形框的时候,要在图片上做一个矩形框标记,这个标记在用户未关闭网页之前都要显示出来。如果画矩形标记的同时又能获得矩形4个点的坐标最好了。谢谢了.这个使用asp.net+c#做的。

胡怀飞的主页 胡怀飞 | 初学一级 | 园豆:45
提问于:2008-11-11 15:59
< >
分享
所有回答(2)
0

javascript来弄弄吧。具体没弄过。

谢小漫 | 园豆:436 (菜鸟二级) | 2008-11-11 17:17
0

随便写了下,只是一个思想。下面的代码只支持向右下角拉动。也没怎么试。

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="" />

<script type="text/javascript">
function drawsomthing(){
var status = "up";
var orgpos = {};
function $(el){
return document.getElementById(el);
};
document.onmousedown
= function(ev){
status
= "down";
var el = $("overarea");
if(!el){
el
= document.createElement("div");
el.id
= "overarea";
el.style.position
= "absolute";
el.style.background
= "#000000";
el.style.display
= "none";
document.getElementsByTagName(
"body")[0].appendChild(el);
}
el.style.width
= "0";
el.style.height
= "0";
var pos = pointer(ev || window.event);
orgpos
= pos;
el.style.left
= pos.x + "px";
el.style.top
= pos.y + "px";
el.style.display
= "block";
};
document.onmouseup
= function(){
status
= "up";
};
document.onmousemove
= function(ev){
if(status!="down")return;
var el = $("overarea");
var pos = pointer(ev || window.event);
el.style.width
= (pos.x - orgpos.x) + "px";
el.style.height
= (pos.y - orgpos.y) + "px";
}
function pointer(event) {
var docElement = document.documentElement,
body
= document.body || { scrollLeft: 0, scrollTop: 0 };
return {
x: event.pageX
|| (event.clientX +
(docElement.scrollLeft
|| body.scrollLeft) -
(docElement.clientLeft
|| 0)),
y: event.pageY
|| (event.clientY +
(docElement.scrollTop
|| body.scrollTop) -
(docElement.clientTop
|| 0))
};
}
}
window.onload
= function(){
drawsomthing();
}
script>
head>
<body>

body>
html>

 

下班回来聊QQ之余改了下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="" />
<style type="text/css">
.opacity
{border:1px dashed #adcd3c;position:absolute;display:none;overflow:hidden;color:#ff0084;font-size:12px;}
.opacity div
{filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;padding:5px;background-color:#f2fddb;height:100%;width:100%;}
</style>
<script type="text/javascript">
function drawsomthing(pel){
var status = "up";
var orgpos = {};
function $(el){
return document.getElementById(el);
};
pel.onmousedown
= mousedown;
pel.onmouseup
= mouseup;
pel.onmousemove
= mousemove;

function mousedown(ev){
status
= "down";
var el = $("overarea");
if(el)el.style.display = "none";
disableDefault(ev);
if(!el){
el
= document.createElement("div");
el.id
= "overarea";
el.innerHTML
= "<div>博客园http://www.cnblogs.com</div>"
el.className
= "opacity";
el.onmouseup
= mouseup;
el.onmousedown
= mousedown;
el.onselectstart
=new Function ("return false")
document.getElementsByTagName(
"body")[0].appendChild(el);
}
el.style.width
= "0";
el.style.height
= "0";
var pos = pointer(ev || window.event);
orgpos
= pos;
el.style.left
= pos.x + "px";
el.style.top
= pos.y + "px";
el.style.display
= "block";
};
function mouseup(ev){
status
= "up";
};
function mousemove(ev){
if(status!="down")return;
disableDefault(ev);
var el = $("overarea");
var pos = pointer(ev || window.event);
var relpos = {x:(pos.x - orgpos.x),y:(pos.y - orgpos.y)};
el.style.width
= Math.abs(relpos.x) + "px";
el.style.height
= Math.abs(relpos.y) + "px";
//没去仔细想了。
if(relpos.x < 0 && relpos.y< 0){//左上,left,top都变
el.style.left = pos.x + "px";
el.style.top
= pos.y + "px";
}
else if(relpos.x < 0 && relpos.y > 0){//左下,left变
el.style.left = pos.x + "px";
}
else if (relpos.x > 0 && relpos.y > 0){//右下,left,top都不变

}
else if(relpos.x > 0 && relpos.y < 0){//右上,top变
el.style.top = pos.y + "px";
}
else if(relpos.x == 0 && relpos.y > 0){//向下线条 都不变

}
else if(relpos.x == 0 && relpos.y < 0){//向上线条 top变
el.style.top = pos.y + "px";
}
else if(relpos.x < 0 && relpos.y == 0){//向左线条 left变
el.style.left = pos.x + "px";
}
else if(relpos.x > 0 && relpos.y == 0){//像右线条 都不变

}
else if(relpos.x == 0 && relpos.y == 0){
el.style.left
= orgpos.x + "px";
el.style.top
= orgpos.y + "px";
}
};
function disableDefault(e){
e
= e || window.event;
if ( e && e.preventDefault )
  
//阻止默认浏览器动作(W3C)
  e.preventDefault();
else
  
//IE中阻止函数器默认动作的方式
  window.event.returnValue = false;
return false;
};
function pointer(event) {
var docElement = document.documentElement,
body
= document.body || { scrollLeft: 0, scrollTop: 0 };
return {
x: event.pageX
|| (event.clientX +
(docElement.scrollLeft
|| body.scrollLeft) -
(docElement.clientLeft
|| 0)),
y: event.pageY
|| (event.clientY +
(docElement.scrollTop
|| body.scrollTop) -
(docElement.clientTop
|| 0))
};
}
}
//没有处理超过图片边界的。也没去封装成组件。
window.onload = function(){
drawsomthing(document.getElementById(
"myimg"));
}
</script>
</head>
<body>
<img id="myimg" src="http://photocdn.sohu.com/20081111/Img260573864.jpg" alt="" title="" />
</body>
</html>

5yplan | 园豆:1330 (小虾三级) | 2008-11-11 17:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册