87,921
社区成员
发帖
与我相关
我的任务
分享动态(随意)地在背景图上贴图片
例如背景图是地图，随意用鼠标点击时，在鼠标位置贴上相应的标志（图片），不用flash的情况下，并且最后有一个数组能记录所贴上标志的位置坐标。
我所知道可以用一个div里面作为最底（中间放背景图），然后在上面加上其他div（标志图片），然后定位到图片那个div的坐标，但具体的实现方式，请问各位大侠是否有好的解决方法和简单例子。
我所知道可以用一个div里面作为最底（中间放背景图），然后在上面加上其他div（标志图片），然后定位到图片那个div的坐标，但具体的实现方式，请问各位大侠是否有好的解决方法和简单例子。
...全文
请发表友善的回复…
发表回复
fantiny 2006-11-03
- 打赏
- 举报
<html>
<head>
<title> 鼠標取框 </title>
<script language="JavaScript">
var x0;
var y0;
var select=false;
function Conmousedown()
{
x0=document.body.scrollLeft+event.clientX;// 鼠?起始横坐?
y0=document.body.scrollTop+event.clientY;// 鼠?起始?坐?
select=true;
}
function document.onmouseup()
{
//document.all.img1.click();
select=false;
}
function document.onselectstart()
{
return false;
}
function document.ondrag()
{
return false;
}
function Conmousemove()
{
if (select)
{
dd.style.display='';// 如果鼠?已?正?移?，将??置?可?。
if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
{
dd.style.left=x0;
dd.style.width=document.body.scrollLeft+event.clientX-x0-2;
}
else // 从右向左
{
dd.style.left=document.body.scrollLeft+event.clientX;
dd.style.width=x0-(document.body.scrollLeft+event.clientX);
}
if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
{
dd.style.top=y0;
dd.style.height=document.body.scrollTop+event.clientY-y0;
}
else// 从下向上
{
dd.style.top=document.body.scrollTop+event.clientY;
dd.style.height=y0-(document.body.scrollTop+event.clientY);
}
}
}
</script>
</head>
<body>
<form name="form1">
<table>
<tr>
<td onMouseMove="javascript:Conmousemove()" onMouseDown="JavaScript:Conmousedown();">
<input type="image" name="img1" id="img1" src="22.jpg" onclick="return false;">
</td>
</tr>
</table>
<!--table id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px RED Solid; display:none;">
<tr>
<td></td>
</tr>
</table-->
<div id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px RED Solid; display:none;"><div>
</form>
</body>
</html>
<head>
<title> 鼠標取框 </title>
<script language="JavaScript">
var x0;
var y0;
var select=false;
function Conmousedown()
{
x0=document.body.scrollLeft+event.clientX;// 鼠?起始横坐?
y0=document.body.scrollTop+event.clientY;// 鼠?起始?坐?
select=true;
}
function document.onmouseup()
{
//document.all.img1.click();
select=false;
}
function document.onselectstart()
{
return false;
}
function document.ondrag()
{
return false;
}
function Conmousemove()
{
if (select)
{
dd.style.display='';// 如果鼠?已?正?移?，将??置?可?。
if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
{
dd.style.left=x0;
dd.style.width=document.body.scrollLeft+event.clientX-x0-2;
}
else // 从右向左
{
dd.style.left=document.body.scrollLeft+event.clientX;
dd.style.width=x0-(document.body.scrollLeft+event.clientX);
}
if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
{
dd.style.top=y0;
dd.style.height=document.body.scrollTop+event.clientY-y0;
}
else// 从下向上
{
dd.style.top=document.body.scrollTop+event.clientY;
dd.style.height=y0-(document.body.scrollTop+event.clientY);
}
}
}
</script>
</head>
<body>
<form name="form1">
<table>
<tr>
<td onMouseMove="javascript:Conmousemove()" onMouseDown="JavaScript:Conmousedown();">
<input type="image" name="img1" id="img1" src="22.jpg" onclick="return false;">
</td>
</tr>
</table>
<!--table id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px RED Solid; display:none;">
<tr>
<td></td>
</tr>
</table-->
<div id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px RED Solid; display:none;"><div>
</form>
</body>
</html>
rockytan 2006-11-03
- 打赏
- 举报
怎样能把文件读出的坐标以图标形式都显示在相应的位置上呢，请给予提示或例子，谢谢
rockytan 2006-10-31
- 打赏
- 举报
谢谢，我单击背景图，并可以在相应位置显示图标，问题是，我想再选择另外一个位置时，原图标跟着鼠标一起移动，请问有什么方法解决。
ImN1 2006-10-31
- 打赏
- 举报
谢谢，我单击背景图，并可以在相应位置显示图标，问题是，我想再选择另外一个位置时，原图标跟着鼠标一起移动，请问有什么方法解决。
---------------------------------------------------------
每一个动作都重新计算相对坐标
---------------------------------------------------------
每一个动作都重新计算相对坐标
rockytan 2006-10-24
- 打赏
- 举报
各位有这方面的例子吗，解决分数加倍奉送.
meizz 2006-10-24
- 打赏
- 举报
你的思路没有错，确实是这样实现的，但具体实现需要你自己写JS脚本，这部分工作别人是没有办法代替的。只能是说你遇到什么具体的困难大家帮助你，
myvicy 2006-10-24
- 打赏
- 举报
记得有人用js写过星际争霸游戏。你这个肯定也可以实现。不过很费事！搜索“js星际争霸”，不知道这个对你http://www.junstudio.org/xingji/有没有启发。
