kemayo / maphilight

jQuery plugin that adds highlighting to image maps
http://davidlynch.org/projects/maphilight/docs/
MIT License
491 stars 278 forks source link

Finding Id Dynamically to keep any area selected #113

Closed TylerPardue1 closed 2 years ago

TylerPardue1 commented 2 years ago

Hey guys, Im working with this plugin and I'm having some trouble with something. Like the Demo-Features file, when you click the star, it will stay clicked. but, what I want to do be able to click any Area in my map and have that area that was clicked stay selected.

I can currently click on any area, but how can I get it to target the area I selected

Please let me know if anyone else has found a solution to this

 $(function() {
             function KeepHighlight(elem) {
                 var Id = $(elem).attr("Id");
                 alert(Id);
             };

             $('.map').maphilight({
                 fillColor: '008800'
             });

             $(document.querySelectorAll('area[Id]')).click(function(e) {
                 e.preventDefault();

                 var data = $(document.querySelectorAll('area[Id]')).mouseout().data('maphilight') || {};
                 data.alwaysOn = !data.alwaysOn;
                 $(document.querySelectorAll('area[Id]')).data('maphilight', data).trigger('alwaysOn.maphilight');
             });
         });

var data = $(document.querySelectorAll('area[Id]')).mouseout().... and $(document.querySelectorAll('area[Id]')).data('maphilight', data)...

Are causing all areas to be selected, but im not sure what to replace them with

TylerPardue1 commented 2 years ago

After 8 Hours of fiddling with this, I found the solution 5 Minutes after posting my question....

Solution:

$(function() {
             function KeepHighlight(elem) {
                 var Id = $(elem).attr("Id");
                 alert(Id);
             };

             $('.map').maphilight({
                 fillColor: '008800'
             });

             $(document.querySelectorAll('area[Id]')).click(function(e) {
                 e.preventDefault();
                 var data = $(this).mouseout().data('maphilight') || {};
                 data.alwaysOn = !data.alwaysOn;
                 $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
             });
         });