javascript：突出显示图像区域/部分

我想创建一个简单的jsp/servlet代码，该代码应具有以下内容：

1） 显示具有不同部分的图像。例如：国家地图

2） 允许用户使用鼠标拖动在此图像上标记部分。当用户不断拖动鼠标时，该区域会覆盖一些不同的颜色

3） 当用户移动鼠标时，还应计算图像上的x和y坐标。[但此功能是可选的。]

此应用程序的目的是在图像中标记不同的“区域”，这些区域将与其x-y坐标一起保存在数据库中

有人能建议如何做到这一点吗？是否有任何可用的库/API可以提供帮助

---

您好，

这里有一个小片段让您开始学习。将

div#server

的文本设置替换为向服务器发送坐标的代码。我将把画布和其他重要内容的背景图像留给您

var c=$（“#map”）；
var ctx=c[0].getContext（“2d”）；
var-down=[0,0]；
var-bound=c[0]。getBoundingClientRect（）；
c、 鼠标向下（功能（e）{
down=[e.clientX-bound.left，e.clientY-bound.top]；
});
c、 鼠标（功能（e）{
var rect=[
向下[0]，
down[1]，（（e.clientX-bound.left）-down[0]），（（e.clientY-bound.top）-down[1]）
];
ctx.fillStyle=“#bbbbbbbb”；
ctx.fillRect（rect[0]，rect[1]，rect[2]，rect[3]）；
$（“#服务器”）.text（“发送：+rect”）；
});
正文{
背景颜色：浅蓝色；
}
#地图{
背景色：白色；
光标：十字线；
}

这些都是javascript/html。您能建议一些使用javascript/html的方法吗？
标记和鼠标侦听器。看看