0

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!

ronsic
  • 205
  • 4
  • 15
  • This question might help you: http://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag/12667751#12667751 But you'd want to trigger the behaviour in response to a mouse click, rather than simply hovering the area. You'd also want to persist the visbile/not visible state of the red area. I'd be inclined to just set an attribute on the area element myself. Anyway, hopefully its enough to aid you. :) – enhzflep Jul 21 '15 at 05:32
  • You can't do what you want to do using image maps. – jduncanator Jul 21 '15 at 05:34
  • Somehow, I think you can use an image map, then use jquery to provide the click event after stuff. – nocturns2 Jul 21 '15 at 06:59

1 Answers1

0

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.

Runcorn
  • 5,144
  • 5
  • 34
  • 52