想做一个报纸在线预览的功能.鼠标移到版面图相应区域点击后,则进入相应的内容页面.就象人民网的网上读报一样.如:http://paper.people.com.cn/rmrbhwb/html/2008-02/15/node_34.htm前台显示比较容易解决，难的是后台发布的编辑器如何做，我的实现思路是:
将上传的版面图显示在一个编辑页面中，当鼠标在图片上相应区域点击后拖动，就会拉出一个相应的层来（类似于在dw中画图片热点）。鼠标释放后，弹出对话框，输入目标文章网址。而层的位置数据用js获取后存入数据库，作为图片热点区域的坐标。这样依次画出多个热点区域来。由于本人对js不甚了解，现在遇到的技术难题是：
如何通过js获取鼠标动作和坐标，绘制出相应位置和大小的层（这个层只是为了直观，真正的目的是为了获取特定区域的坐标）。还望高手们指点。大家有没有人做过类似的项目？
将上传的版面图显示在一个编辑页面中，当鼠标在图片上相应区域点击后拖动，就会拉出一个相应的层来（类似于在dw中画图片热点）。鼠标释放后，弹出对话框，输入目标文章网址。而层的位置数据用js获取后存入数据库，作为图片热点区域的坐标。这样依次画出多个热点区域来。由于本人对js不甚了解，现在遇到的技术难题是：
如何通过js获取鼠标动作和坐标，绘制出相应位置和大小的层（这个层只是为了直观，真正的目的是为了获取特定区域的坐标）。还望高手们指点。大家有没有人做过类似的项目？
Shape是VML最基本的对象，利用它可以画出所有你想要的图形。在VML中，使用的坐标并不是Document的坐标，它有自己的坐标系，这样一来，动态改变它的坐标，就可以实现放大、缩小、旋转等功能了。shape的 CoordSize 属性就是用来定义坐标的，它有两个参数，<v:shape CoordSize="2800,2800" />， 这里的2800,2800 是横纵坐标被分成了2800个点，并不是HTML里面默认像素。如果没有设置圆点，VML默认是 0,0 （左上角），当然你也可以使用 CoordOrig 属性设置VML的圆点坐标。 <v:shape CoordOrig="-1400,-1400" CoordSize="2800,2800" style="width:500;height:500" /> 注意:定义的坐标只是相对的，真正显示的图形大小还需要 style="width:500;height:500" 来定义！ 上面的定义后，你可用的坐标是 x(-1400到1400) y(-1400到1400) ，这样的坐标就像数学里面的坐标了，把画版分成了四个块。
我目前的难题主要还是js对div的控制。昨天研究了一晚，解决了如何插入层。现在要面对的是如何通过js获取鼠标动作来调整层的大小、位置。
你所要的知识点里面有包含到
可以去参考参考
http://blog.csdn.net/pippe/archive/2008/02/14/2095984.aspx
请参考blog.csdn.net/bookshop的XPaint专题
你们两个的作品我都看过了.牛!也给了我很好的参考.我写了一段,可以在图片上画出一个层来,但是还存在缺陷.鼠标移到图片以外的其他位置或图片上所绘制的层上时,绘制的层的位置就错误地改变.请高手们再帮看看:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
var isDraw=false;
var ismouseup=true;
var i=0;
var currentdraw;
var Dleft=new Array();
var Dtop=new Array();function drawLayer(){
//isDraw=true;
i=i+1;
var img_x=ie_x(document.getElementById("bigimg")); //大图绝对x坐标
var img_y=ie_y(document.getElementById("bigimg")); //大图绝对y坐标
var x=event.offsetX; //鼠标在大图上的x坐标
var y=event.offsetY; //鼠标在大图上的y坐标
var d=document.createElement("div");
document.body.appendChild(d);
d.style.border="1px solid #ff0000";
d.style.width=0;
d.style.height=0;
d.style.overflow="hidden";
d.style.position="absolute";
d.style.left= x+img_x-2;
Dleft[i]= x+img_x-2;
d.style.top= y+img_y-2;
Dtop[i]=y+img_y-2;
d.id="draw"+i;
//d.innerHTML="<div class='innerbg'>x:" + x + ",y:" + y + ". img_x:" + img_x + ",img_y:" + img_y + ".</div>" ;
currentdraw=d;
}function dragSize(){
if(isDraw){
var img_x=ie_x(document.getElementById("bigimg")); //大图绝对x坐标
var img_y=ie_y(document.getElementById("bigimg")); //大图绝对y坐标
var x=event.offsetX; //鼠标在大图上的x坐标
var y=event.offsetY; //鼠标在大图上的y坐标
//document.getElementById("draw"+i).innerHTML="<div class='innerbg'>x:" + x + ",y:" + y + ". img_x:" + img_x + ",img_y:" + img_y + ".</div>" ;
var drawW = (x+img_x) - Dleft[i];
var drawH = (y+img_y) -Dtop[i];
document.getElementById("draw"+i).style.width = drawW > 0 ?drawW:-drawW;
document.getElementById("draw"+i).style.height = drawH > 0 ?drawH:-drawH;
if(drawW < 0){
document.getElementById("draw"+i).style.left = x+img_x;
}
if(drawH < 0){
document.getElementById("draw"+i).style.top = y+img_y;
}
}else{
return false;
}
}function stopDraw(){
isDraw=false;
}function MouseOut(){
if(!ismouseup){
isDraw=false;
}
}
function MouseOver(){
if(!ismouseup){
isDraw=true;
}
}function ie_x(e){ //取元件的绝对x坐标
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
} function ie_y(e){ //取元件的绝对y坐标
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
} //改变层的大小
</script>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-left: 0px;
}
div {
margin:0;
padding:0;
}
/*.innerbg {
background:#ff0000;
filter:Alpha(Opacity=40, FinishOpacity=90, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100);
width:100%;
height:100%;
}*/
-->
</style>
</head>
<div id="Layer1"></div>
<img src="6.jpg" name="bigimg" border="0" id="bigimg" style="margin-left:60px;margin-top:90px;border:1px solid #ccc;"
onMouseMove="javascript:dragSize();"
onMouseDown="javascript:isDraw=true;ismouseup=false;setCapture(true);drawLayer();"
onMouseUp="javascript:isDraw=false;ismouseup=true;releaseCapture();"
onMouseOut="javascript:MouseOut();"
onMouseOver="javascript:MouseOver();"
>
</body>
</html>
最新把XPaint又放到我网站上了:http://www.crossgo.com/xpaint具体实现方法请看blog.csdn.net/bookshop的XPaint专题ysqy6666 :可以通过控制获取画布区域的绝对位置及大小,来控制鼠标的可操作区域.
将上传的版面图显示在一个编辑页面中，当鼠标在图片上相应区域点击后拖动，就会拉出一个相应的层来（类似于在dw中画图片热点）。鼠标释放后，弹出对话框，选择一张图片，作为此区域链接地址。而层的位置数据用js获取后存入数据库，作为图片热点区域的坐标。这样依次画出多个热点区域来。 麻烦哪位高手帮我看一下呢