Imagemap:让点击区域的工具提示显示在鼠标窗口上

Imagemap: Leave clicked area's tooltip displayed on mouseout?

本文关键字：显示 鼠标 窗口 工具提示 区域 Imagemap      更新时间：2023-09-26

我使用插件Imagemapster添加高亮显示和工具提示功能到图像映射。它提供了如下的回调:

 image.mapster(
{
   mapKey: 'name',
   listKey: 'name',
   onClick: function (e) {
        if(!$(this).hasClass('clicked')){
           $(this).addClass('clicked');     
        }
        $('#selections').html(xref[e.key]);           
    },
   onMouseover: function (e) {
        $('#selections').html(xref[e.key]);
    },
    onMouseout: function (e) {
         if(!$(this).hasClass('clicked')){
            $('#selections').html('');
         }
    },
});

下面是我的例子:

http://jsfiddle.net/5scbh/6/

如果你点击一个项目，我希望该项目的工具提示保持显示，即使你的鼠标离开。我有点在那里，但问题是:如果你点击一个项目，然后鼠标移到另一个区域，然后鼠标移出…它不会将所单击项的工具提示保持在鼠标外。

我喜欢工具提示在鼠标悬停时改变到你翻转的任何地方，但是一旦你把鼠标移出那个区域或图像地图，我希望它回到显示任何被点击区域的工具提示。如果您取消单击已单击的区域，因此没有单击任何内容，则工具提示应该消失。

你能帮我做这件事吗?谢谢你。

您可以将当前的工具提示存储在data属性中，然后在鼠标退出时将其写回。

...
onClick: function (e) {
    if(!$(this).hasClass('clicked')){
               $(this).addClass('clicked');     
        }
    $('#selections').html(xref[e.key]);
    $( '#selections' ).data( 'storage', xref[e.key] );
},
...
onMouseout: function (e) {
    if(!$(this).hasClass('clicked')){
        $('#selections').html('');
             }
        if( $( '#selections' ).data( 'storage' ) ) {
            $( '#selections' ).html( $( '#selections' ).data( 'storage' ) );
        };
    },
....

更新你的小提琴

这是更新后的提琴，使用了@robotroll提供的正确编辑，以及解决了我上面评论中描述的选择/取消选择问题。

用下面的代码解决了这个问题:

  onClick: function (e) {
        if (e.selected) {
            $(this).addClass('clicked');                
            $('#selections').html(xref[e.key]);         
            $('#selections').data( 'storage', xref[e.key] );
        } else {
            $(this).removeClass('clicked');             
            $('#selections').removeData();
            $('#selections').html('');
        }           
    },
http://jsfiddle.net/5scbh/10/

相关文章：