在网页设计中，我们经常需要实现一种功能：当鼠标悬停在图片上时，能够显示额外的提示信息，类似于天气预报地图中显示的提示。这种功能可以增强用户体验，让用户更直观地了解图片所代表的信息。在JavaScript中，我们可以利用事件监听、DOM操作以及CSS样式来实现这一效果。
我们需要在HTML中为每张图片添加一个`<title>`或`<alt>`标签，用于存储提示信息。例如：
```html
<img src="image.jpg" alt="天气晴朗，温度26℃">
```
接下来，我们使用JavaScript来监听鼠标的`mouseover`和`mouseout`事件。当鼠标进入图片区域时，显示提示信息；当鼠标离开图片时，隐藏提示信息。我们可以创建一个函数来处理这个逻辑：
```javascript
function addTooltip(imgElements) {
for (let img of imgElements) {
img.addEventListener('mouseover', function(event) {
// 创建提示框元素
let tooltip = document.createElement('div');
tooltip.className = 'tooltip'; // 添加CSS类名以便样式设置
tooltip.textContent = this.alt; // 获取图片的alt属性作为提示内容
// 设置提示框的位置
let position = this.getBoundingClientRect();
tooltip.style.left = position.left + 'px';
tooltip.style.top = (position.bottom + 10) + 'px'; // 隐藏在图片下方
// 将提示框添加到文档中
document.body.appendChild(tooltip);
// 显示提示框
tooltip.style.display = 'block';
});
img.addEventListener('mouseout', function() {
// 隐藏提示框
let tooltip = document.querySelector('.tooltip');
if (tooltip) {
tooltip.remove();
}
});
}
}
// 获取所有带有alt属性的图片
let imagesWithAlt = document.querySelectorAll('img[alt]');
addTooltip(imagesWithAlt);
```
在上述代码中，我们创建了一个`addTooltip`函数，它接受一个包含图片元素的集合，然后为每个图片添加事件监听器。当鼠标移到图片上时，创建一个新的`<div>`作为提示框，并将`alt`属性的值设置为提示内容。我们还计算了提示框的位置，使其位于图片下方，然后将其添加到页面上并显示。当鼠标离开图片时，我们查找并移除当前的提示框。
我们需要添加一些CSS样式来美化提示框：
```css
.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
display: none;
}
```
这段CSS设置了提示框的基本样式，包括位置、颜色、边框和字体大小。`display: none`初始状态下隐藏提示框，当JavaScript将其设置为`block`时，它会显示出来。
通过JavaScript和CSS，我们可以实现鼠标悬停在图片上时显示提示信息的功能。这个功能在网页中广泛应用，不仅限于天气预报地图，还可以用于任何需要提供额外信息的图片场景。通过调整CSS样式，我们可以进一步定制提示框的外观，使其更好地融入页面设计。
