Javascript 实现工具提示

我已经查看了Imagemapster网站上的文档，以及这里的许多帖子，但无法让工具提示正常工作。我尝试在jsfiddle.com上发布HTML和JS，但无法使其正常工作，因此这里有一个指向示例地图的链接。这是一个非常简单的想法，一旦地图正常运行，我就可以将适当的代码应用到实际项目中

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(''); 
            } 
        }, 
    }); 
});

---

可以根据鼠标位置定位保存工具提示的div：

CSS:

JS:

---

不要忘了在鼠标离开热点时，删除

onMouseout

后的逗号，id为

myDiv

的div的内容将被清空。也就是说，div在页面上总是可见的，只是当鼠标移到某个地图区域后，它的大小为零。是否有任何原因使您无法删除文本

此DIV应该隐藏，直到您将鼠标悬停在其中一个热点上。

从页面中删除？这会使页面最初的状态与鼠标移出后的状态相同，除非我遗漏了什么。：）嗨，Enhzflep，不，你没有遗漏什么，我遗漏了什么：）我能说什么，Ajax、jQuerty、CSS、PHP等等，有时候它会让你的大脑无法控制。我现在已经把那个部件修好了，谢谢你的帮助。嗨，康斯坦丁，我已经添加了你建议的代码，但由于某种原因，地图停止运行。当我添加新代码时，Dreamweaver在第49行突出显示了一个编码错误，这很奇怪，因为我从未更改过该代码。这是一个指向地图的链接，它在没有代码更改的情况下正常运行，这是一个带有代码更改的链接。如果您愿意看一看，也许您可以在编码中发现一个错误。谢谢您的帮助。@请标记问题中的代码，因为这是SO的要求。我需要更长的时间才能转到您的页面并在那里调试您的代码。如果您可以创建一个JSFIDLE示例也会有所帮助。您好，我无法让JSFIDLE正常工作，因此这里是JSvar 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（'''）；}}，}）；@Mark删除onMouseout事件处理程序后的逗号。

#myDiv {
    position: absolute;
    z-index: 10;
}

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();
}