c# - 如何在鼠标悬停和可点击区域的图像上创建热点？

Question

我有一个场景，我想在图像上创建热点。我想让图像上的热点由用户创建。假设用户想在图像上创建矩形，然后他只需要用鼠标左键单击并创建矩形和这个矩形应该显示为可点击区域（热点。）。我需要它，因为我需要创建一个页面，用户可以在其中选择特定区域并且将来应该是可点击的。任何人都可以建议我的方式。

这是示例图像。我现在可以在图像上画线，但我想创建应该可以用鼠标点击的矩形。

背景是图像，蓝色细线是用鼠标绘制的。

Answer 1

首先，您需要将图像包装到relative定位的DIV. 然后为图像添加mousedown事件监听器。在此处理程序中存储单击坐标并mouseup为图像添加侦听器。在此mouseUp()存储 mouseup 坐标，删除所有以前的处理程序并DIV为文档创建一个新的。然后为新添加click和mouseover事件监听器DIV，设置位置样式absolute，实际位置和大小，您可以根据存储的坐标计算。最后将新创建的附加DIV到图像包装器中。

您可以在文档中包含一个空元素，然后为 this创建新元素，而不是使用 aDIV作为热点。MAPAREAMAP

编辑

我真的不确定你需要什么，但是...

创建一个DIVin mouseUpHandler()：

var clickableDiv = imgWrapper.appendChild(document.createElement('DIV'));
clickableDiv.style.position = 'absolute';
clickableDiv.style.top = calculatedY;
clickableDiv.style.left = calculatedX;
clickableDiv.style.width = calculatedWidth;
clickableDiv.style.height = calculatedHeight;
clickableDiv.style.backGround = '#fff';
clickableDiv.style.opacity = '0.5';
clickableDiv.addEventListener('click', doSomethingOnClick, false);

您可以根据需要自由设置样式clickableDiv，但需要backGround和opacity（也可以为 0）才能使DIV可点击。doSomethingOnClick是一个函数名，它处理对clickableDiv.