0

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

这是图像映射的第一部分：

<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 中显示标签。有什么原因吗？

4

1 回答 1

1

胡言乱语，

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

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

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

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

于 2012-10-31T23:09:52.670 回答