Question

我正在尝试制作一个身体贴图，当点击身体的某些部位时，会突出显示为红色并且在保持该状态时也是透明的，因此我可以点击其他部分，就像选择一样我似乎无法找到解决方案。

以下是样本

http://79.170.44.80/sicuandomain.com/#

谢谢！

Answer 1

我不熟悉地图和区域实施。但是，在尝试了一些jQuery插件进行锻炼和学习之后，我认为这将有助于你的事业。

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

所以，基本上你需要使用这个jQuery插件初始化地图，并为你想要用作的区域定义click事件：

$(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

这里有很多事情要做，例如在点击事件中移除上一个选定区域。但是，我猜你自己可以做到这一点。

而且，还有其他插件可以完成这项工作。此外，如果您想手动执行此操作，您应该知道插件的工作原理。

我希望这有助于你的事业。

如何单击地图区域并将颜色更改为红色并保持透明？

1 个答案:

JSFIDDLE DEMO