jQuery maphilight с использованием метода "onclick"

Question

Я использую плагин maphilight, он применяется к изображениям с атрибутом 'usemap' и выделяет области, определенные в их карте при наведении курсора

(документация здесь: http://davidlynch.org/projects/maphilight/docs/).

Я хотел бы вызвать эффект подсветки с событием onClick вместо «onmouseover».

Я делаю это:

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');

});

Это работает правильно, но я хочу стереть эффект подсветки, когда я делаюновый клик.

Есть идеи?

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

Изменение события "mouseover" на "click" поможет.

Answer 2

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

Answer 3

Просматривая код, похоже, что событие mouseout.maphilight привязано к карте с подсветкой, которая очистит холст.Я думаю, вы можете вызвать это событие, чтобы очистить его.Похоже, вам, вероятно, придется отслеживать состояние самостоятельно.