Question

我已经查看了Imagemapster网站上的文档以及此处的大量帖子，但无法使工具提示正常工作。我尝试在jsfiddle.com上发布HTML和JS，但无法使其正常工作，因此这里是示例地图http://www.teenspanish.com/imagemap/的链接。这是一个非常简单的想法，一旦地图运行正常，我可以将适当的代码应用于真实项目。

1）悬停效果很好，没关系。

2）地图下面有一个div，它在页面加载时打算隐藏，但它是可见的。只要将鼠标移动到其中一个热点上，就会用适当的文本替换它，并且从地图上的那一点看起来功能正常。因此，在调节onMouseover和onMouseout效果的代码中必定存在缺失或不正确的内容。

3）有没有办法将工具提示放在地图（热点）本身上，就像大多数工具提示一样？事实上，所有文字都出现在地图下的div内，但我更喜欢将它放在热点上。

我对CSS没有任何问题，但几乎没有使用JS的经验，所以我真的不知道从哪里开始。这个样本是从我在Imagemapster上绊倒后遇到的各种样本中创建的。如果有人可以查看代码并让我知道什么是错的，那么非常感谢，以及任何有用资源的建议或链接。

这是我的代码：

var image = $('#map1'); 
$(document).ready(function () { 
    $('#map1').mapster({ 
        singleSelect : true, 
        clickNavigate : false, 
        mapKey: 'color', 
        listKey: 'name', 
        fillColor: "ffffff", 
        fillOpacity : 0.5, 
        onMouseover: function (e) { 
            $('#myDiv').html(xref[e.key]); 
        }, 
        onMouseout: function (e) { 
            if(!$(this).hasClass('clicked')) { 
                $('#myDiv').html(''); 
            } 
        }, 
    }); 
});

Answer 1

您可以根据鼠标位置定位持有工具提示的div：

CSS：

onMouseover: function (args) {
    var container = $("#myDiv"),
        event = args.e;
    container.html(xref[args.key]).show();
    container.css({
        "top": event.clientY,
        "left": event.clientX
    });
},
onMouseout: function (args) {
    $("#myDiv").hide();
}

JS：

onMouseout

请勿忘记在{{1}}之后删除逗号。

实施工具提示

1 个答案: