如何能够单击地图区域并将颜色更改为红色且透明？

Question

I'm trying to make a body map which would when clicked on certain parts of the body, be highlighted with the color red and also transparent while staying in that state so I can click on the others too like a selection but so far I can't seem to find the solution.

Here is the sample

http://79.170.44.80/sicuandomain.com/#

Thanks!

Answer 1

I am not myself familiar with the map and area implementation. But, After just trying some jQuery Plugins for exercise and learning, I think this will help your cause.

jQuery Plugin : http://davidlynch.org/projects/maphilight/docs/

So, Basically you need to initalize the map with this jQuery plugin and define the click event for the area you want to use as :

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

The document for the plugin is not good however. So, you can try and use if you like.

JSFIDDLE DEMO

There is lot to do here like removing the previous selected area on click event. But, I guess you can achieve that yourself.

And, There are other plugins to do the job as well. Plus you should know how the plugins works as well if you would like to do it manually.

I hope this help your cause.