Using maphighlight with jQuery 1.4.2.min.js with a XHTML document.

Sent with an application/xhtml+xml header

Chrome 5.0.375.55 threw a Javasript error in jQuery 1.4.2

The fix for the problem in maphighlight is as follows

Changing line 148

from

wrap = $('<div>').css({display:'block',background:'url('+this.src+')',position:'relative',padding:0,width:this.width,height:this.height});

to

wrap = $('<div></div>').css({display:'block',background:'url('+this.src+')',position:'relative',padding:0,width:this.width,height:this.height});

solved the issue. In other words Chrome is very strict about XHTML tag matching.

Is is possible to apply my own CSS rule to the highlighted area?

I'd like to apply a single CSS rule to the highlighted area:

mix-blend-mode: overlay

How would I go about applying my own style rules to the area that is highlighted on hover?

print e.getAttribute('id'), e.getAttribute('transform'),

It says syntax error on line 73.

Hello -many thanks for this formidable plugin.

I have a quick question: is it possible to have area map elements load in a specified colour (say red with always on property) but then still be hoverable (say grey). When the image is selected it stays a specific colour (say blue) until the next area map element is selected? I am guessing this is a jquery issue? I am stuck at the moment and not able to sort this out.

The idea is basically that elements can be hilghted twice (once with always on, and the second when hovered/selected). This is a very 'popular' question online, but I have not yet found an answer... The script I have sorted out thus far works pretty much like the following: http://jsfiddle.net/keith/REyPv/2/

An idea I had was to load the element twice ... but this does not seem to be good programming (and I couldn't get that to work either :-) )

Kind regards and thank you!
G.

Yesterday Chrome had an update, now my maphilight doesn't work properly
Here's my problem: http://jsfiddle.net/qKkjK/1/
I move mouse over some areas and some are not changing its color. Yesterday (before update) i checked it, was everything OK
If i put a GIF there... THAT gif only, i tested with other images and other gifs, but only that made it work ok.
The gif is commented on line 41, put it on the code and see the difference
Someone had same problem ? Or maybe know how to make it work nice again ?

zepto.js is a lightweight reduced implementation of jQuery, and thus quite snappy. To make maphilight work with zepto.js

• Change the string jQuery to Zepto
• Change the string alwaysOn.maphilight to alwaysOn:maphilight
• Initilaize maphilight with wrapClass: false

Does not seem to work at all. If jQuery is downgraded to 1.6.4 it works. Canvas seems to be initialized ok (map is drawn) but the mouseover event handler does not seem fire at all.

No error messages anywhere.

I've been trying fruitlessly for an hour to switch or hide the images used in maphilight -- and finally looked at the page in Firebug and noticed that the images are wrapped in a

The hover highlight is not working in the latest version of chrome on windows: Version 38.0.2125.122 m.

Even the demo does not work:
http://davidlynch.org/projects/maphilight/docs/demo_simple.html

The issue is that the highlights get darker after mouseout-ing and they stay highlighted, even if not clicked.

Specifically, on the mouseout event of any "area":
-all "areas" get highlighted with opacity:1 ..ie. you can't see thru the highlights

Tried it on IE/Firefox/Safari/Opera, it working fine.

Everything was working fine, until I updated chrome, this afternoon.

In jquery.maphilight.js lines 210-212

        usemap = img.get(0).getAttribute('usemap');

        map = $('map[name="'+usemap.substr(1)+'"]');

Chrome 23.0.1271.91 returns null for usemap instead of an empty string so executions breaks on usemap.substr(1).

Fix:

        usemap = img.get(0).getAttribute('usemap');
        if (!usemap) {
            return;
        }

        map = $('map[name="'+usemap.substr(1)+'"]');

Hello,

I have an issue where maphilight is not working if loaded in jquery tabs on internet explorer 9. It works perfectly in Chrome or IE 11... but not Internet Explorer 9. I am using the latest version of jQuery and jQuery UI.

Here is a jsfiddle to evidence the problem: http://jsfiddle.net/Guill84/u5hvrvek/

As soon as I remove the tabs ... the map loads up with maphilight as expected. Does anybody know why this may be the case? Is this a conflict of some kind?

Thanks and have a good day,
G.

Hope this doesn't come out a bit long winded here, but I ran into an error with this piece of code and have a potential fix. Got here because I was using the timezone-picker thingy from timezonepicker.com

Basically I'm using angular with the ng-hide feature (and animations on it too). When using IE if the element I'm looking to "maphilight" is not visible at the time that the code runs it isolates the height and width both as 0. When we later make the items visible, this of course causes some issues.

Basically you call img.height and canvas.height etc. on the direct HTML DOM elements a lot and when they're not visibly rendered (at least in ie) they like to report themselves as having 0 height and width. So instead I changed calls like:

var somethingArbitrary = img.height;

to:

var somethingArbitrary = $(img).height();

This got everything to work again.

Gonna try to fork it and submit my changes...

Traceback (most recent call last):

  File "GitHub\maphilight\tools\svg2imagemap.py", line 33, in <module> import parse_path

  File "GitHub\maphilight\tools\parse_path.py", line 101, in <module> lineTo = Group(Command("L") + Arguments(coordinatePairSequence))

  File "GitHub\maphilight\tools\parse_path.py", line 19, in Command return CaselessPreservingLiteral(char)

  File "GitHub\maphilight\tools\parse_path.py", line 33, in __init__  self.myException.msg = self.errmsg

AttributeError: 'CaselessPreservingLiteral' object has no attribute 'myException'

Trying to use /tools/svg2imagemap.py // python2.7

maphilight 1.2.2 is not working with the latest jQuery library 1.7.1 on IE6.

Works on IE7+ though.

I also tested with jQuery 1.6.1 and 1.6.4 - IE6 works with these versions well, it appears to be only 1.7+ that has the issue.

For the life of me, I can't figure out why this thing justifies my image to the left no matter what I do to break that behavior. I tried applying float:right to it, I tried making sure the container was set to text-align:right... but the darn thing won't budge as long as it has class "map" assigned to it. I even tried applying a style="padding-left:100px" directly on the image to get it away from the left side border, but even that gets ignored.

Soon as I remove the "map" class, however, it behaves normally again. Of course, then it loses its link to this script, so that's no solution.

Anyone know what could be causing this? The behavior is identical on all major browsers and it's really annoying.

In firefox when I use the following maphilight call:

$('.map').maphilight({
  fill: false,
  stroke: false,
  shadow: true,
  shadowPosition: 'outside',
  shadowFrom: 'fill',
  shadowRadius: 25,
  shadowColor: '2077c8',
  shadowOpacity: 0.9
});

The shadow looks about twice as large in Firefox as the one displayed in Chrome or Safari (have not tested IE).

Using Firefox 8.0.1, jquery 1.7.1, and maphilight as downloaded from here: http://davidlynch.org/projects/maphilight/ (last modified december 8, 2011).

Other than that, I love the new shadow option. It's just what I needed, right when I needed it :p

I'm new to jQuery in general, so I may be doing something wrong, but I'm combining jQuery Tools and this plug in. In every other major browser but IE, it works fine. IE shows a blank image, but it's not consistent.

I know you're not my debugger, but take a look at the effect here:
http://www.nefcoinnovations.com/representatives_test.html

I think it has to do with jQuery Tools' "Scrollable" positioning and hiding of the DIVs. If you load up a tab (add #2 to that link, it will load the 2nd tab), it should load the image, but then the hidden tab does not work. Now, the 3rd tab doesn't use an image map yet, and the 4th tab is an iframe. Notice, though, that the hot-spots are still active, it's just that the image using the map does not show.

Looking online, I found this:
"The problem: In IE, when an image has the style display: none, the image.height and image.width properties will always return 0. The reason is that these values are returned from the layout subsystem, but display: none images do not participate in layout. Had the developer styled these images using visibility: hidden instead of display: none, IE will still calculate a layout size for the element and the code would have worked as expected."

Any ideas?

Using with jQuery 1.10.2 and the migration plugin, (but also tested with jQuery 1.4.2), on the latest version of Chrome on OSx (29.0.1547.76) maphiglight gives many strange behaviors.
Sometimes it works, but the canvas background becomes solid, hiding the original image. Other times it doesn't work at all.
The behavior changes at each page reload. I cannot find a logic in this.
Testing the page with all other major browsers (Safari, Firefox, and even IE 8.0) give no problem at all.
Can it be a bug in the latest version of Chrome?

Thanks for the great work

I'm not able to tab into areas on Firefox (43.0.4) on initial load. As soon as I mouse over the image, tabbing works and respects the tabindex order.

I made a copy of demo_features.html where focus on areas triggers a mouseover on that area, to make it more visible. Compare this page in Chrome and Firefox.

In Chrome, you can load the page and start tabbing. The first five elements will do their thing, and by the sixth tab you are at the first link in the features list. In Firefox, tabbing fails to focus on anything until your mouse enters the scene, after which it works as expected.

Any ideas for avenues to troubleshoot this are welcome.

When using maphilight with a page served with

application/xhtml+xml;

then Firefox will throw an exception at the line
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';

I've fixed this by extending the has_VML function using an exception.
Also changed b.adj == "object" to b.adj === "object" to shut up Netbeans from naging about the comparison. But this is not strictly needed to avoid Netscape throwing an error.

has_VML = (function() {
        try {
            var a = document.createElement('div');
            a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
            var b = a.firstChild;
            b.style.behavior = "url(#default#VML)";
            return b ? typeof b.adj === "object": true;
        }
        catch (err)
        {
            return false;
        }
    })();

Of course, once MSIE 9 is history, the VML part of this plugin could be dropped entirely.

Not sure if this is due to my coding or a bug in the plugin. Has anyone else experienced this?

When I run .maphilight on a DOM element, I get 2 canvas elements created instead of just one.

If I then rerun .maphilight on the same DOM element updates affect the second canvas element, the first remains unchanged.

The DOM element I'm working with comes in via Ajax, but the plugin doesn't generally have a problem with that.

Anyone else come across this?

Hello Kemayo,

I am seeing a weird behavior with the maphilight, I have a div with some text with fix position.

And every time I scroll down so the div gets infront of the map the text on the div change, its like its font-weight changes.

Regards.,

Hi,

Thanks for this awesome plugin, i've used this for mobile app, everthing works charm..!

but i cant control the image size as well canvas size, so how can i resize (or) rescale the original image and cavas for mobile devices..

help me out..

The maphighlight code assumes that the image that has the map was not scaled in any way. This is not always true. So, for example if the img tag is <img src="map.png" width=500 height=280> but the image is actually 800x400, the background image for the canvas will be sized improperly, around line 156, the following should be added:

backgroundSize: this.width +"px " + this.height + "px",

this will ensure that the background image is scaled at the same size as the actual image

Hi,

I've downloaded the plugin, and tried to do a simple map, but they don't high light.

Demo: https://jsfiddle.net/hnjqf1n2/2/

Something wrong within it?

In one of my projects tag is sometimes empty. So I don't need the to be generated.

Maybe add some default option like 'emptyMap': true for backward compatibility, so it could be disabled on startup if desired.

Possible solution:

// if map has no descendant areas and option is set to false
if (!map.has('area').length && !option.emptyMap) {
    return
}

somewhere near line 235 of http://davidlynch.org/projects/maphilight/jquery.maphilight.js

Hello , thanks for an awesome plugin , do any of you know of a way to make it work with dynamically created image maps. I have a site that creates a virtual magazine . In the magazine I have products with polygons for the outline of the product, this all works great when I am creating this static but since the magazine will have many pages and many image maps, I have to Ajax pull the page then create a map tag with js and add area tags that the coords for the area tags come from Ajax as well . Now Almaty hrefs work but highlighting does not. It's like the plugin is not there.

Any ideas

Please, add custom settings of canvas (width,height). I need this stuff in last project, where img on html was bigger than original, canvas set width and height from original image. Now it works with help of bad things like this: $('.gen_plan').height().
It will be awesome, if you add some custom settings of canvas to functions's input.

P.S. sry for a bad english.

Good day.
I have this code:

$.getJSON("/get_lease_statuses",
            function(json){
                $.each (json, function(key, value){
                    if (value[0] === "busy"){
                        var area = $('#'+key);
                        area.addClass("{alwaysOn: 'true', fillColor:'fa0000'}");
                        area.attr('href', '/task/'+value[1]);
                    }
                })
            },

            $('#firstfloor').maphilight()

        );

I get some JSON data, and based on it add class {alwaysOn: 'true', fillColor:'fa0000'} to area. After the completion of ajax request i use your maphilight() function.

Sometimes it works well, but sometimes not - areas are not hilighted.
Maybe U can advise me something ?

I am trying to change colors of maphilight dynamically.

reponse = JSON.parse(reponse);

        $('area').each(function()  {
            $(this).attr('data-maphilight', '{"stroke":0, "fillColor":"CCFFCC", "fillOpacity":0.3, "alwaysOn":true}');
        })  

        for (var i = 0; reponse.length > i; i++) {
            var test = '#'.concat(reponse[i].nomTerrain);
            $(test).attr('data-maphilight', '{"stroke":0, "fillColor":"FF0000", "fillOpacity":0.3, "alwaysOn":true}');
        }

        $('img[usemap]').maphilight();

This works only once. When it comes to a second time, it doesn't ! It changes CSS classes, but not the maphilight! pls help me !!

Does not support $el.size() anymore. $el.length has to be used.
Please correct in line 232

As far as I can see everything else is working fine.

I noticed a significant performance bug in the current code. On line 244, you trigger the 'always on' event/method:

                          $(map).find('area[coords]')
                .trigger('alwaysOn.maphilight')
                .bind('mouseover.maphilight', mouseover)
                .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });

The problem is that you are triggering it once for each area that it finds. However that method only needs to be triggered once per map (because it finds and processes all the areas in the map each time). If you have a map with many areas, this causes a significant performance issue (not surprisingly). The solution is to simply change the order of that trigger method to apply to the map only:

                          $(map).trigger('alwaysOn.maphilight')
                                    .find('area[coords]')
                .bind('mouseover.maphilight', mouseover)
                .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });

Hope that was helpful! :)

When the images are loaded with data uri's, IE fails to load the background image if it contains any new line characters in it.

The hover highlight is not working in the latest version of chrome(Version 32.0.1700.102 m).
Even the demo does not work:
http://davidlynch.org/projects/maphilight/docs/demo_simple.html

Tried it on IE/Firefox/Safari/Opera, it working fine.

How to make it responsive and save hightlight effect? Thank you!

I have narrowed down an issue that I opened last week. The issue is as follows:

If you invoke the plugin more than once in any modern browser, it opens up as expected (in my case I have created two maps that feature maphllight selectable areas).

If you invoke the plugin more than once in IE9, then it will load the first but not the second. I have created a jsFiddle to evidence this problem: http://jsfiddle.net/Sws2T/12/

Am thinking this could be a bug -or please let me know if my javascript is not correctly achieving what I am trying to do.

Kind regards,
G.

Looks like ie11 stopped supporting the attachEvent method. http://msdn.microsoft.com/en-us/library/ie/ms536343(v=vs.85).aspx

Ill try to find a fix if I can. I know its in beta still but ie11 is scheduled to be auto updated/released at the end of this year so we will want to fix this soon.

Setting the alwaysOn option on the full map seems to be broken.
It it is set to true none of the areas display - neither initially nor on mouse over.

The problem I believe is in the usage of the mouseover function

if(options.alwaysOn) {
    $(map).find('area[coords]').each(mouseover);
} 

... but mouseover checks for !area_options.alwaysOn

mouseover = function(e) {
  var shape, area_options;
  area_options = options_from_area(this, options);
  if( !area_options.neverOn && !area_options.alwaysOn ) { 

We have noticed a problem where as the user is entering + saving new circle locations the coordinates are actually being changed until the circle reduces into such a small overlay it isn't clickable any longer nor editable.
Easiest way to reproduce is simply select circle and click on TARGET property.
Problem relates to radius calculation. There is a 1 pixel difference after saving because of rounding operation. If drawn circle has odd width, for example 95px, radius will be calculated as: 95/2 = 47.5 => 47px.
If this was single isolated reduction/resize it would be ok, but when adding 30 circle overlays, by the time you get to the end of adding/saving the first ones are pin points!!
FILE: imgmap/jscripts/imgmap.js

Fix attempted:
if (area.shape == 'circle') {
width = parseInt(area.style.width, 10);

•   var radius = Math.floor(width/2) - 1;
  

•   var radius = Math.max(Math.floor(width/2) - 1, 0);
  

else if (this.areas[id].shape == 'circle') {

•   var radius = Math.floor(width/2) - 1;
  

•   var radius = Math.floor(width/2);
  

  if ((width + (diff)) - 1 > 0) {
  //real resize right
  this.areas[this.currentid].style.top = (top + (-1* diff/2)) + 'px';

•       this.setAreaSize(this.currentid, (width  + (diff)) - 1, (height + (diff)));
  

•       this.setAreaSize(this.currentid, (width  + (diff)) - 1, (height + (diff)) - 1);
  

First, thanks so much for writing this. It's great. I'm testing it on IE 10 and it works great, but in the latest version of Chrome, my image appears briefly and then disappears. I think the canvas is occluding it. If I mouse over the image, only the edges appear. Thanks again for looking at this.

I use maphilight for first time and keep one script that yet work.
This script have a groupBy param set to true, and this generate error:

Uncaught TypeError: Object #<error> has no method 'toLowerCase' jquery.js:4366
x.extend.attr jquery.js:4366
x.extend.access jquery.js:886
x.fn.extend.attr jquery.js:4058
mouseover jquery.maphilight.js:283
x.event.dispatch jquery.js:5095
v.handle

I try on Opera 20.0.1387.64 and Chrome 33.0.1750.154 m

In this script on tag area i dont have any attribute for group areas by. Can this be my mistake?

1.3 was released May, 2011. There have been 34 commits (as of now) since that release. Why not tag a 1.4 so we can take advantage of those without worrying about (unstable) changes to master?

Hello and good day.

Is there like a way for me to highlight every area with a click of a button? I'm trying to create a map where the location names are covered by maphilight and will be revealed once the user clicks on them.

Now, there's a reset button, and I want it to highlight the revealed areas once again, but I can't really figure out how to do so.

There are problems in IE8 when you call .maphighlight() on an image that is not visible, either because its parent container or the image itself has display: none applied to it. Upon subsequently making the container visible, the entire image is not shown.

There is another bug I've found where the map highlight intermittently doesn't work in IE8 however I suspect it may be fixed when this one is resolved.

I'm dynamically replacing images.

They will have their own usemap name.

This means old usemap events never get released, as the current code just takes the usemap name as a reference for releasing them. Probabally needs a slightly different event binding mechanism.

Here is the link to download zip: http://bit.ly/1PlqGmJ (POC i created)

Issue: On click i am highlighting selected map area. if i click on other map area, script should remove previously selected map area and show for the present clicked map area.

Brouser Google Chrome 53.0.2785.116 m (64-bit) still can process such images perfectly.

As the javascript currently adds the image as background-image of a DIV tag, the image is shown in it's full size. This get's quite uncomfortable if you're working with 2x images or have your images resized because of a lower screen-resolution.

The solution here is to add the css .attachment-original { background-size: contain; }, what is ignored (at least in Firefox) if you add it it your css file, because the system already adds a background property here.

My solution:

• Updated line 247 to set the background as CSS-property backgroundImage not as background to allow me to overwrite only some of the background-settings
• Add .attachment-original { background-size: contain; } to my css file.

Please update in line 247 or write another proposal here.

I'm dynamically replacing an image.

When replacing images with an image that has map everything works fine. However when the replaced image has no image map, then the previous image will still be displayed.

So far I extended the code, to remove the wrapper. This however left the new image invisible and render other parts of the screen unresponsive. Still have work to do to make that work.

Is there any solution available?