如何使用鼠标悬停和可点击区域在图像上创建热点？

Question

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

这里是示例图像。我现在能够在图像上绘制线条，但我想创建矩形，应该可以用鼠标点击它。

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

Answer 1

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

您可以在文档中添加空的DIV元素，然后为此MAP创建新的AREA，而不是使用MAP作为热点。

修改

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

在DIV中创建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的点击次数。