I released maphilight 1.3 just now. (Though really I consider github the more authoritative source.)
So, IE9 broke maphilight because it was finally exposing the has_canvas codepath to IE. Turns out all the canvas stuff worked beautifully, but one call to setTimeout was relying on a non-IE feature. So that’s fixed!
Also changed since the 1.2 release (one year ago, gosh):
- New option groupBy lets you bundle several areas together
- New option wrapClass lets you set a classname for the wrapper div created to hold the canvas elements used by maphilight. If it’s set to
trueit’ll use the classname from the image. - .data(‘maphilight’) is checked for areas, as well as the metadata plugin. With jQuery > 1.4.3 this means that you can use JSON in an HTML5 data- attribute to pass this in. See the API docs for details.
- Performance on image maps containing a lot of areas was terrible because I was stupid about where I triggered an event.
- Opera compatibility was harmed by jQuery bug #6708 (fixed in 1.6), so work around that.
Feel free to submit issues / pull requests on the github project.
Hi David, just upgraded to 1.3 and discovered the “groupBy” option. Finally I don’t have to use versions of maphighlight that were modified by someone else! Great!
My pages work perfectly, but they don’t validate, because the new attribute of “area” is not known to the validator. See http://www.golfcard.de/home.ph…
Anything I can do?
Thanks, Florian
@Doesn’t:
You could switch to an HTML5 doctype (where rel is valid on areas) or tell groupBy to use a different attribute name which is valid.
Alternately, I’ve just added support for groupBy being a selector to the version on github. Take a look at http://davidlynch.org/js/maphi… for an example of that working.
I’m having problems on internet explorer when I want to use it with an image that isn’t visible when I call .maphighlight() – it seems like it was an issue before this latest update too. To replicate, put a display:none div around http://davidlynch.org/js/maphi…, then display:none from the div using developer tools
can you not run your jquery to load the image AND THEN activate the maphilight?
*remove display:none from the div using developer tools
Hay David , the plugin is very nice ^^ ,, thank you much for that ,, but i have a question : is there any plugin or anyway to do this” highlighting mouse-over ” thing but in another image like human anatomy for example ?!
Hi David!
I’m still very new to all of JQuery! I very much like it and try to lear as fast as I can 🙂 because it’s really hardcore for me 🙂 I stumbled up on your plugin which I must say like very much. But I still don’t understand how can I change for ex. the fillColor on a distinct area from within the script. I’d like to use ajax query in the background to get a status and I’d like to color the area with a status specific color. Can you help me with that?!
Thx, in advance!
SuZo
Hi, this is an excellent plugin, I’m building an interactive map with tooltips, I saw an example where you select some link and highlight an area, but the question is, do you have a script to highlight any number of areas, without the needing of coding 1 by 1 to each area?
this can be done in jquery. use the jquery selector to select all your areas and then do a foreach() and hilight each one
David – can’t seem to get options specified in the class attribute to work. Are there some sort of requirements for that?
@CG: The requirement for the options in the class attribute working is to have the jQuery metadata plugin installed. (There’s a copy in the docs directory included in the download.)
Alternately, you can use data- attributes, such as: data-maphilight='{“groupBy”:”.group”}’
@David – thanks!
One other small question that I’ll probably figure out but ask anyway – is there a way to have an area set at fillOpacity 1, but have it fade to a different fillOpacity on mouseover?
Hello there,
Everything works like a charm on any browser (Chrome, FF, Opera, Safari) BUT I got trouble with IE…
IE7,IE8 and IE9 don’t display my map at all.
Seems that I have the same problem than another user named Coen who wrote this to you earlier: “Great application! I only have one problem: I have an overlay which should be over all other content on the page, but the maphighlight image is the top element. I tried fiddling with the z-index, but that doesn’t work.”
In my case, I have a background image which has a “position: absolute” and a “z-index”. I expect the map to appear on top of it but it doesn’t. Even if I get rid of the background-image, I still can’t see the map. However, if I get rid of the “map” class of the map-image, It then appears (but the highlighting is not working).
Keep in mind that it works for me on ANY browser but on IE, whatever the version of IE.
Any idea?
Thanks.
Hello,
Is there as simple way to do the inverse? I’m trying to highlight some product(s) on an image. I want to do something like fade the rest of the image when hovering over an area?
Thanks for a great plugin!
Hi, great stuff you got here. Loving it. There is however one problem. I have an image that I resize prior to init this script to fit a certain size, however your script enlarges it back to full size. I really need to have it of a specific size. Really appreciate if you can help me fix this. Thanks!
Hi David,
Does anyone have answer for this one:
“One other small question that I’ll probably figure out but ask anyway –
is there a way to have an area set at fillOpacity 1, but have it fade to
a different fillOpacity on mouseover?” as asked by CG
I’m trying to figure out the same thing but cannot find any solutions. I even tried to code it by myself but it didn’t worked out 😀
you can just code it in jquery on your page
make a jquery function like this:
function hilightBooth(obj, on, color) {
var z = obj.data(‘maphilight’) || {};
z.alwaysOn = on;
z.fillColor = color;
z.fillOpacity = 0.6;
obj.data(‘maphilight’,z).trigger(‘alwaysOn.maphilight’);
};
then do in your jquery live function $(object).trigger(‘onHover’){this.hilightBooth(your colours and stuff);}
Ronny & Juha,
At about line number 257 in jquery.maphilight.js remove the following code snippet:
&&
!area_options.alwaysOn
It fixed the issue for me. Hope it does for you too.
Best Regards
Anand Majethia
Hi David!
Great stuff! Thanks!
One question – in an example “A smal map” you show code for mouse over to hilight from only one external element, may be yoy’l show code for many external elements?
Hi David,
Mr David
can you suggest me, in website contact us page i am using word map i gave location bullet i want show address on mouse over…… can you reply me
Thanks for the great plugin! The link to 1.3 on jquery.com is broken, and there’s no listing for that revision on the project page there. Is 1.3 still available?
I seem to be having problems where the canvas seems to be behind the image. After refreshing the page, the maphilight usually works as normal, although yesterday I saw an instance where it stayed behind the image through 2 or 3 refreshes before it started working properly.