javascript - 如何能够单击 map 区域并将颜色更改为红色并透明？

Question

我正在尝试制作一个 body 贴图，当点击 body 的某些部位时，它会以红色突出显示并且在保持该状态时也是透明的，这样我也可以像选择一样点击其他部位但是所以到目前为止，我似乎找不到解决方案。

这是示例

http://79.170.44.80/sicuandomain.com/#

谢谢!

Answer 1

我自己不熟悉 map 和区域实现。但是，在尝试了一些用于练习和学习的 jQuery 插件之后，我认为这会对您的事业有所帮助。

jQuery 插件:http://davidlynch.org/projects/maphilight/docs/

因此，基本上您需要使用此 jQuery 插件初始化 map 并为您要使用的区域定义点击事件:

$(function () {
    //Initalize the Image with the plugin
    $('.map').maphilight({
        stroke: false,
        //Use the color you want
        fillColor: '000000'
    });
    //Map area selector to intercept the click event
    $('#Map area').click(function (e) {
        e.preventDefault();
        var data = $(this).mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    });
  });

但是插件的文档并不好。所以，如果你喜欢，你可以尝试使用。

JSFIDDLE DEMO

这里有很多事情要做，比如在点击事件中移除之前选择的区域。但是，我想您可以自己实现。

而且，还有其他插件可以完成这项工作。另外，如果您想手动操作，您也应该知道插件是如何工作的。

我希望这对您的事业有所帮助。