Maphilight - Need it to Deactivate Highlight On New Mouse Click

Question

I'm using Maphilight by David Lynch and as far as getting it to highlight on mouseover, that works great. What I'm having problems with and that there doesn't seem to be any examples on is when clicking an area, having the area A. highlight and stay lit and B. Deactivate when clicking another area.

Essentially, I'm using the script from the demo page and trying to modify it accordingly, however, everything I've tried hasn't worked. It seems pretty simple and straightforward, so I'm surprised there's little to no documentation on this functionality.

Anyone got any ideas? Basically, the image I'm using as my map is a circle, divided into quadrants. Each quadrant should light when moused over and stay lit when clicked until a new quadrant on the map has been selected. Here's what I'm using for my script:

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

Any help or suggestions you may have would be great.

UPDATE: An online link to the page I'm working on is http://test.dpigraphics.net/process.php

Answer 1

There is a solution in jquery&maphighlight ONLY!:

And the trick is in handling good one of the maphighlight's input attributes: alwaysOn:

$( "#map-tag area" ).click(function(){
    $(this).data('maphilight', { 
          alwaysOn: true 
    }).trigger('alwaysOn.maphilight');
    //check if area wasnt already selected - otherwise gets buggy
    if( !$(this).hasClass('selected') ){ 
      $('.selected').data('maphilight', {
          alwaysOn: false
      }).trigger('alwaysOn.maphilight');
      $('#map-tag area').removeClass('selected');
      $(this).addClass('selected');
    }

});

EDIT: make sure you have the latest maphilight ! : http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js , from maphilight's official webpage.

Answer 2

There is a solution in jquery&maphighlight ONLY!:

And the trick is in handling good one of the maphighlight's input attributes: alwaysOn:

$( "#map-tag area" ).click(function(){
    $(this).data('maphilight', { 
          alwaysOn: true 
    }).trigger('alwaysOn.maphilight');
    //check if area wasnt already selected - otherwise gets buggy
    if( !$(this).hasClass('selected') ){ 
      $('.selected').data('maphilight', {
          alwaysOn: false
      }).trigger('alwaysOn.maphilight');
      $('#map-tag area').removeClass('selected');
      $(this).addClass('selected');
    }

});

EDIT: make sure you have the latest maphilight ! : http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js , from maphilight's official webpage.

Answer 3

After playing in jsfiddle some, and using some of the suggestions from the comments above, I found a solution to my issue:

   $('#process area').click(function() {
    $(this).data('maphilight', { alwaysOn: true }).trigger('alwaysOn.maphilight');

    $('.selected').data('maphilight', {
        alwaysOn: false
    }).trigger('alwaysOn.maphilight');

    $('#process area').removeClass('selected');

    $(this).addClass('selected');

This code is pretty much how I had intended my map to work. It does flicker a bit when changing from one area to another, but it appears to work just fine. Hope this helps someone else in the future...

Answer 4

Try this:

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

});

(At least jQuery 1.6 required.)

Answer 5

Import two js file.. jquery.min.js AND jquery.maphilight.js

Then,

 $(function() {

   $('.map').maphilight({strokeColor:'808080',strokeWidth:10,strokeOpacity: 1,fillColor:'00c31d'});

    });

--HTML Part

<img src="YOUR IMAGE" class="map" usemap="#image-maps"/>
<map id="image-maps">

<area>
</map>