0

我正在使用插件 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/

如果您单击一个项目，我希望该项目的工具提示即使您鼠标悬停也能保持显示。我有点在那里，但问题是：如果您单击一个项目，然后将鼠标悬停在另一个区域然后鼠标移出......它不会将单击的项目的工具提示保留在鼠标移出上。

我喜欢鼠标悬停时工具提示会更改为您悬停的任何内容，但是一旦您将鼠标移出该区域或图像地图，我希望它返回显示已单击任何区域的工具提示。如果您取消单击单击的区域以便没有单击任何内容，则工具提示应该消失。

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

4

2 回答 2

0

这是更新的小提琴，使用@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/

于 2014-05-21T05:18:30.897 回答
0

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

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

相应地更新了你的小提琴。

于 2014-05-21T01:02:33.237 回答