js页面创建热点

最新推荐文章于 2022-04-18 00:15:15 发布

wyyl1

最新推荐文章于 2022-04-18 00:15:15 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： border null div url

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/wyyl1/article/details/2468917

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个基于HTML的图片区域交互示例，通过JavaScript实现了用户在网页上选取图片特定区域的功能，并能够记录所选区域的坐标。该示例展示了如何使用HTML与JavaScript进行简单的前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=utf-8" />

<title>热点1</title>

<SCRIPT LANGUAGE="JavaScript" defer="true">

start=true;

startx=0;

starty=0;

function mychange(e)

{

if(!e)e=event;

mydiv=document.getElementById("myrect");

if(e.clientX-startx<0)

{

myleft=e.clientX;

mywidth=startx-e.clientX;

//坐标

document.test.x1.value = myleft;

document.test.x2.value = startx;

}

else

{

myleft=startx;

mywidth=e.clientX-startx;

//坐标

document.test.x1.value = myleft;

document.test.x2.value = e.clientX;

}

if(e.clientY-starty<0)

{

mytop=e.clientY;

myheight=starty-e.clientY;

//坐标

document.test.y1.value = mytop;

document.test.y2.value = starty;

}

else

{

mytop=starty;

myheight=e.clientY-starty;

//坐标

document.test.y1.value = mytop;

document.test.y2.value = e.clientY;

}

mydiv.style.left=myleft;

mydiv.style.top=mytop;

mydiv.style.width=mywidth;

if(!(document.all&&(myheight==0)))

mydiv.style.height=myheight;

}

function myclick(e)

{

if(!e)e=event;

if(start)

{

document.getElementById("mydraw").innerHTML="";

mydiv=document.createElement("div");

mydiv.style.position="absolute";

mydiv.style.overflow="hidden";

mydiv.style.height=1;

mydiv.style.border="2px solid red";

mydiv.id="myrect";

document.getElementById("mydraw").appendChild(mydiv);

startx=e.clientX;

starty=e.clientY;

}

else

mychange(e);

start=!start;

}

function mymove(e)

{

if(start)return;

if(document.getElementById("myrect")==null)return;

mychange(e);

}

document.ondblclick=myclick;

document.onmousemove=mymove;

</SCRIPT>

</head>

<body>

双击鼠标左键可以开始画图，双击鼠标左键后结束画图。

<table width="770" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="768" height="609">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr><div id="mydraw" >

<td height="2">

<IMG src="meinv.jpg" width="540" height="515" usemap="#Map">

</td>

</div>

</tr>

</table>

</td>

</tr>

</table>

<map name="Map" id="Map">

<area shape="rect" coords="{$x1},{$y1},{$x2},{$y2}" href="{$url}" />

</map>

<FORM NAME="test" action="#" method="post">

url : <INPUT type="text" NAME="url" ID="url">

<INPUT type="hidden" NAME="x1" ID="x1">

<INPUT type="hidden" NAME="y1" ID="y1">

<INPUT type="hidden" NAME="x2" ID="x2">

<INPUT type="hidden" NAME="y2" ID="y2">

<input type="submit" name="submit" >

</FORM>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。