如前所述，要添加一个带有X关闭按钮的漂亮弹出窗口，您需要单独添加它，例如作为div元素并将其放置在正确的位置。然后最初使用display: none或visibility: hidden隐藏它。并添加一个mouseenter事件侦听器（element.setEventListener("onmouseenter", () => ...)）到area元素，并更新弹出窗口的样式以使其可见。
此外，您可能希望隐藏弹出窗口，为了实现这一点，您需要一个mouseleave事件侦听器，它将再次将隐藏的样式应用于弹出窗口。

您必须在area标记中将href属性更改为title。应用此更改后，当您将鼠标悬停在此区域上时，将显示title属性中包含的弹出文本。如果你需要一个更高级的效果，你必须使用JS来显示类似的情况。

<div id="container">
    <div id="image_container">
        <img src="http://tinypic.com/images/goodbye.jpg" usemap="#image_map">
        <map name="image_map">
            <area alt="Left Eye" title="Left Eye" coords="118,36,148,80" shape="rect">
            <area alt="Mouth" title="Mouth" coords="121,84,198,118" shape="rect">
        </map>
    </div>
</div>

字符串

帮助我的是W3Schools页面。由于链接会改变，请参阅HTML5课程中的“图像Map”课程。我发现使用< ... onclick="alert('text here');">对我很有效，这是他们的一个例子的改编（因为，这是我的第一个答案，我犹豫了，因为我不确定这是否是剽窃），除了<... href="stuff.htm">像他们那样，我使用了一个警报。这与您的目标相似，尽管无可否认略有不同。希望有帮助！