Question

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

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

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

你可以帮帮我吗？谢谢。

Answer 1

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

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

更新了你的小提琴。

Answer 2

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

Imagemap：在mouseout上显示点击区域的工具提示？

2 个答案: