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

See [this question](http://stackoverflow.com/questions/8397556/always-on-jquery-command) — Owlvark, Sep 17 '12 at 02:33
The only problem there is that the link to the poster's example isn't working anymore, so it's difficult to see in what context the solution is to be used. — jbrown574, Sep 17 '12 at 17:25
Have you tried the solution in the answer? It looks like you just have to add a line in your click handler to turn all hilighting off first. — Owlvark, Sep 17 '12 at 19:40
I've done that - adding any time of conditional thereby turning off the highlighting doesn't seem to affect anything. I've tried a variety of the solutions others have had on here, but none of them appear to work. — jbrown574, Sep 17 '12 at 19:55
I actually did some poking around and modification of the code in that example and got it working. Thanks for the suggestion. I probably wouldn't have revisited that post for the answer. — jbrown574, Sep 17 '12 at 21:18

score 7 · Answer 1 · answered Sep 17 '12 at 21:52

7

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.)

answered Sep 17 '12 at 21:52

Owlvark

1,763
17
28

1

This solution works the best out of all of them on this page. I just wish that when one was selected, if you were hovering over new areas the highlighted area would be hidden. – EHerman Mar 13 '14 at 15:04

score 0 · Answer 2 · answered Sep 17 '12 at 21:16

0

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...

answered Sep 17 '12 at 21:16

jbrown574

99
1
3
10

I like this soluton - just one note - there is missing endling of a function "});" and this one doesnt handle good if user clicks on same area more times :) – jave.web Aug 06 '13 at 10:10
This solution does not work if you select an area of the map, select a new area, and then go back and select the previous area. It never turns back on. – EHerman Mar 13 '14 at 15:00

jave.web · Answer 3 · 2013-08-06T10:39:53.613

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.

score 0 · Answer 4 · answered Jun 30 '15 at 14:09

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>

score -1 · Answer 5 · answered Aug 06 '13 at 10:40

-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.

answered Aug 06 '13 at 10:40

jave.web

13,880
12
91
125

This is very buggy. When you select one area of the map, select a new area, and then go back to the previous area they both remain selected. Not sure what is going on, but doesn't work well. – EHerman Mar 13 '14 at 15:01
@EHerman That is nonsense since there is a global removeClass made, do you have the latest maphighlight? Dont you have some other JS error that would prevent it from processing? I know there are a few older versions circling... This worked for me... – jave.web Mar 13 '14 at 16:51
I don't think I have an older version. I just downloaded it two days ago. I know, looking through the code it looks like it should work, but for me it was causing some issues. I went with another method that I will post down now. – EHerman Mar 13 '14 at 17:58
Did you try it with the maphightlight available on the link I've provided? , have you tested it in google chrome? – jave.web Mar 14 '14 at 12:12
yes sir, I develop within Chrome. But I just downloaded the latest highlight off github – EHerman Mar 14 '14 at 13:22
So there might have been some update, anyway have you tried the maphighlight in the link provided ? – jave.web Mar 16 '14 at 14:04

Maphilight - Need it to Deactivate Highlight On New Mouse Click

5 Answers5