Maphilight - 需要它在新鼠标点击时停用突出显示

Question

我正在使用David Lynch的Maphilight,并且只要在鼠标悬停时突出显示它就可以了.我遇到的问题是什么,似乎没有任何例子,当点击一个区域时,区域A突出显示并保持点亮状态B.单击另一个区域时停用.

基本上,我正在使用演示页面中的脚本并尝试相应地修改它,但是,我尝试过的一切都没有用.它看起来非常简单明了,所以我很惊讶这个功能几乎没有文档.

有人有任何想法吗？基本上,我用作地图的图像是一个圆形,分为象限.当鼠标悬停时,每个象限都应亮起,并在点击时保持亮起,直到选择了地图上的新象限.这是我用于脚本的内容:

$('.map').maphilight({fillColor: 'ff0000'});

$('#q1, #q2, #q3, #q4').click(function(e) {
        e.preventDefault();
        var data = $(this).mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    });

你可能有任何帮助或建议会很棒.

更新:我正在处理的页面的在线链接是http://test.dpigraphics.net/process.php

Answer 1

试试这个:

$('map area').click(function(e) {
    e.preventDefault();
    var clickedArea = $(this); // remember clicked area
    // foreach area
    $('map area').each(function() {
        hData = $(this).data('maphilight') || {}; // get
        hData.alwaysOn = $(this).is(clickedArea); // modify
        $(this).data('maphilight', hData ).trigger('alwaysOn.maphilight'); // set
    });

});

(至少需要jQuery 1.6.)