Question

我有一张大背景照片，其中包含按区域标签描绘的图像的某些部分，以制作图像地图。

以下是图像地图的第一部分：

<img id="mainbkgrnd" src="./images/everythingistemporary2.jpg" width="100%" 
            height="auto" alt="Home" usemap="#homemap">
    <map name="homemap">
        <area class="areamap" id="map_comments" shape="rect" 
        coords="880,140,1000,360" href="comments.php" alt="Comments"/>

当用户将鼠标悬停在描绘区域上时，相应的文本标签会出现在图像右上角的div中。以下是该div的代码：

</map> 
<div id="pagename"></div>

以下是使标签出现的jquery：

$(function() {
    $('area').hover( 
        function(event) {
            var area = this.id.split('map_')[1];
            if (area == 'comments') {
                pn.css('left',1100);
                pn.html('Comments');
            }else if (area == 'shorts') {
                pn.css('left',1100);
                pn.html('Shorts');

问题在于，在不同尺寸的显示器上，描绘的区域不再符合他们想要的位置 - 它们会四处移动。标签出现的div也是如此。

解决此问题的最佳方法是什么？

另外，Internet Explorer根本不会在div中显示标签。有原因吗？

Answer 1

乱码，

尝试 ImageMapster jQuery插件，该插件作用于图片地图，以提供（在v1.2.6）以下功能：

突出显示并选择区域
使用替代图像的酷效果
将图像映射绑定到外部列表
显示区域或区域组的浮动工具提示
分组和排除掩码以创建复杂功能
将图像地图自动缩放到任何显示尺寸，即使处于活动状态

您需要的功能是列出的最后一个功能。

我自己没有使用过ImageMapster，但是 demos 非常令人印象深刻，并且表明插件写得很好。

随着显示器分辨率的变化，html区域图移位

1 个答案: