jQuery maphilight使用“onclick”方法

时间:2012-01-05 15:42:42

标签: javascript jquery javascript-events

我正在使用maphilight插件,它适用于具有“usemap”属性的图像,并概述了鼠标悬停时其地图中定义的区域

(文档:http://davidlynch.org/projects/maphilight/docs/)。

我会用onClick事件而不是“onmouseover”来触发hilight效果。

我这样做:

jQuery('.area').click(function(e){
    e.preventDefault();

    var data = jQuery(this).mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    jQuery(this).data('maphilight', data).trigger('alwaysOn.maphilight');

});

它可以正常工作但我想在我点击一下时擦除hilight效果。

有什么想法吗?

3 个答案:

答案 0 :(得分:1)

查找代码的这一部分并进行更改:

            $(map).trigger('alwaysOn.maphilight').find('area[coords]')
            .bind('mouseover.maphilight', mouseover)
            .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });

对此:

            $(map).trigger('alwaysOn.maphilight').find('area[coords]')
            .bind('click.maphilight', mouseover)
            .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });

更改"鼠标悬停"活动到"点击"会做的。

答案 1 :(得分:0)

查看代码,看起来事件mouseout.maphilight绑定到将清除画布的hilight地图。我猜你可以触发该事件来清除它。看起来您可能需要自己跟踪状态。

答案 2 :(得分:0)

<code> 
$('.mianchor').click(function(e) {
        e.preventDefault();
        var colorx = $(this).attr('title');
        var data = {};
        data.alwaysOn = !data.alwaysOn;
        data.stroke = 'none';
        data.strokeWidth = 0.0000001;
        data.strokeColor = colorx;
        data.fillColor = colorx; // Sample color
        data.fillOpacity = 1;
        $('#mapa').data('maphilight', data).trigger('alwaysOn.maphilight');         
    });