图像映射-在鼠标悬停时以及仅当鼠标停止时如何显示工具提示

图像映射是一种网页设计技术，它允许将图像的不同区域与不同的超链接关联起来。当用户点击图像的特定部分时，会导航到与该部分关联的URL。工具提示（Tooltip）是一种用户界面元素，当用户将鼠标悬停在某个元素上时，会显示有关该元素的额外信息。

基础概念

图像映射：使用HTML的<map>和<area>标签定义图像的可点击区域。
工具提示：通常通过CSS和JavaScript实现，当鼠标悬停在元素上时显示额外信息。

类型

简单工具提示：仅显示文本信息。
高级工具提示：可以包含HTML内容，甚至动画效果。

应用场景

地图导航：点击不同区域跳转到相应页面。
产品展示：悬停显示产品详细信息。
数据可视化：图表中的数据点悬停显示具体数值。

实现示例

以下是一个简单的HTML和JavaScript示例，展示如何在鼠标悬停时显示工具提示，并且仅在鼠标停止时更新内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Map with Tooltip</title>
<style>
  .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the element */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .area:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }
</style>
</head>
<body>

<img src="your-image.jpg" usemap="#image-map" alt="Sample Image">

<map name="image-map">
  <area class="area" shape="rect" coords="34,44,270,350" href="#" alt="Area 1">
  <div class="tooltip">This is Area 1</div>
  
  <area class="area" shape="rect" coords="280,60,450,370" href="#" alt="Area 2">
  <div class="tooltip">This is Area 2</div>
</map>

<script>
  document.querySelectorAll('.area').forEach(area => {
    let timeout;
    area.addEventListener('mousemove', (e) => {
      clearTimeout(timeout);
      const tooltip = e.target.nextElementSibling;
      tooltip.style.left = `${e.pageX}px`;
      tooltip.style.top = `${e.pageY}px`;
      timeout = setTimeout(() => {
        tooltip.style.visibility = 'visible';
        tooltip.style.opacity = 1;
      }, 100); // Delay to ensure mouse has stopped
    });

    area.addEventListener('mouseleave', () => {
      clearTimeout(timeout);
      const tooltip = e.target.nextElementSibling;
      tooltip.style.visibility = 'hidden';
      tooltip.style.opacity = 0;
    });
  });
</script>

</body>
</html>