如何控制带Image Map多链接图片的鼠标悬停预览窗口位置

问题分析 #

Image Map中的<area>元素本身不可见，默认预览插件无法正确识别其实际区域位置，导致预览窗口随机显示。要让预览窗口固定在对应链接区域下方，需要基于area的coords坐标计算定位位置，并调整预览容器的定位规则。

解决方案 #

1. 调整CSS定位规则

将预览容器的定位从relative改为absolute，为JS动态设置位置提供基础：

.mini-preview-anchor {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}
.mini-preview-wrapper {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute; /* 修改为绝对定位 */
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    border: solid 1px #000;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
    transition: z-index steps(1) .3s, opacity .3s, top .3s;
}

.mini-preview-anchor:hover .mini-preview-wrapper {
    z-index: 2;
    opacity: 1;
    transition: opacity .3s, top .3s;
}

/* 保留原有其他样式 */
.mini-preview-loading, .mini-preview-cover {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;    
}

.mini-preview-loading {
    display: table;
    height: 100%;
    width: 100%;
    font-size: 1.25rem;
    text-align: center;
    color: #f5ead4;
    background-color: #59513f;
}

.mini-preview-loading::before {
    content: 'Loading...';
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.mini-preview-cover {
    background-color: rgba(0, 0, 0, 0); /* IE fix */
}

.mini-preview-frame {
    border: none;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

2. 修改JS逻辑，动态计算预览位置

解析每个<area>的coords属性，结合图片缩放比例，将预览窗口定位到区域底部下方：

$(function() {
    $('#p2 area').each(function() {
        const $area = $(this);
        // 解析矩形区域的coords（其他形状可扩展逻辑）
        const coords = $area.attr('coords').split(',').map(Number);
        const img = $area.closest('map').prev('img')[0];
        // 获取图片实际渲染尺寸与原图的缩放比例
        const imgRect = img.getBoundingClientRect();
        const scaleX = imgRect.width / img.naturalWidth;
        const scaleY = imgRect.height / img.naturalHeight;

        // 计算区域底部Y坐标、中心X坐标
        const areaBottom = coords[3] * scaleY;
        const areaCenterX = ((coords[0] + coords[2]) / 2) * scaleX;

        $area.miniPreview({ 
            prefetch: 'parenthover',
            // 插件创建后设置预览窗口位置
            afterCreate: function($wrapper) {
                $wrapper.css({
                    left: `${areaCenterX - $wrapper.width()/2}px`, // 居中显示
                    top: `${areaBottom + 6}px` // 区域下方6px间距
                });
            }
        });
    });
});

3. HTML代码保持不变

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  
   <script src="https://rawgit.com/shaneapen/Image-Preview-for-Links/master/image_preview_for_links.js"></script>
</head>

<p id="p2">
<img src="https://cdn.educba.com/academy/wp-content/uploads/2018/09/Top-Uses-Of-HTML.jpg" usemap="#yourmap" border="0" style="width:500px;height:300px">
<map name="yourmap">
<area shape="rect" coords="200,200,260,290" href="https://codegena.com">
<area shape="rect" coords="0,0,27,35" alt="Computer"href="https://codegena.com">
<area shape="rect" coords="400,50,490,150" alt="Computer" href="https://codegena.com">
</map>
</p>

补充说明 #

• 上述代码针对rect矩形区域适配，若使用circle或poly形状，需修改coords解析逻辑（比如circle取圆心坐标，poly取底部中心点）。
• 图片缩放比例计算确保了定位准确性，即使图片设置了自定义宽高也能正常工作。

内容的提问来源于stack exchange，提问作者tyler