I finally got around to officially releasing maphilight 1.2.
This mostly just updates the official jquery.com release to the HEAD of the github project.
I’d been putting it off because I spent quite a while without easy access to a Windows machine with IE8 to test the fixes that people provided. But I switched back to Windows as my main desktop recently (mainly to play games), so that was resolved.
There’s not much in the way of changes:
- IE8 works now
- New “neverOn” option for use with metadata by Zach Dennis, which stops individual areas from ever being hilighted
- Handles being called on the same area twice differently; now rebuilds the hilighted regions
- …and I added an example of triggering the hilight from another element, since it’s one of the most commonly asked questions
Hopefully I’ll be able to post here a bit more now that I have some of that guilt for not updating off my shoulders. 😛
Thank you for your work!
Do you have time for a question. The example shows how to trigger the highlight from another element. Can you do this into a function so you can use many different links to trigger different highlights?
@Pete, all it takes is a function like this one: http://gist.github.com/447146
Thanks for great work! Works great, it’s the best maphilite code I found on the web.
Is there a way to reverse the fade so everything but the item being hovered over darkens? This would essentially ‘highlight’ the item by dimming the rest of the image.
That would be great to have it inverted like djfunk wrote!!!!
Any one find a way to do this?
Hello,
at first, thank you for your great work, but i have a question.
i want to change an area’s fill color on the run time, but i guess your script only renders when we initialize it.
i tried this one;
$(‘#area_name’).addClass(“{fillColor:’ff0000′}”).mouseover();
but not worked for me, is there a way to change fill color, stroke color etc, on the run time?
thanks,..
ok, nevermind, i have solved my problem by looking at your examples. here is my solution;
var data = $(‘#area_name’).data(‘maphilight’) || {};
data.fillColor = ‘ff0000’;
$(‘#area_name’).data(‘maphilight’, data);
I tried to sign up to github to comment there, but it doesn’t like me.
Anyway, there is a bug with resized images mentioned, and I found a quick-fix that worked for my case, by changing line 156 from
to
(if this comment system doesn’t massacre that)
like at least one other person, though, I am having trouble getting interaction with outside elements. I’ve got a table next to my map, and I have successfully gotten individual elements to light up the map, but haven’t gotten the general case working, even with your (element, triggers) suggestion.
It also would be nice to figure out the best place in the code to put a callback function or custom bit, so I could color the table row if the user is hovering on the map. Unfortunately, I’m new to jquery, and while I think the area should be the mouseover function, getting the name or id of the current area is defying me.
yep; it killed it; maybe this will work:
http://gist.github.com/559538
The great thing about asking for help is how quickly it returns dividends, even from yourself. (because some of it then becomes obvious)
I found the places in the code to put callbacks, and also figured out how to generically do the link from the table to the map. My result probably isn’t as elegant as it could be, since it uses the “name” element to point to the other place. (table’s row’s name= point to maps’s IDs, and map’s names point to table row IDs)
if anybody else cares:
http://gist.github.com/559756
I have converted this map:
http://commons.wikimedia.org/w…
To render the map into section’s but it only renders out the north and south islands. It won’t render around the provinces/states like your USA map. Do you know why?
is there an option to have 3 different states?
say inactive/active/hover?
I’m having an issue with the plugin not working within JQuery tabs. I have three tabs, each with an image and accompanying image map. The highlight works in the first tab but fails to operate in the second and third tabs in IE. Any thoughts on this? I’ve tried calling the highlight on each image separately but that didn’t work. Here is the example:
http://alumni.virginia.edu/mul…
I hate to be the one to ask this but are there directions for how to use this for those of us who’ve never done this before? This is really cool and i’d love to implement it on my WordPress site but everything here is Greek to me and it seems like all documentation assumes that someone understands what you’re talking about, and I really wish I did, lol.
Thanks!
Hi, I tried the current release in IE9 beta, and it didn’t work while having { fade: true } set (like the default settings do).
Thought you might want to know.
Besides: great plugin, I love it!
sys
As djfunk and Aaron above, I’d find it very useful if we could darken everything BUT the hovered map area. Any solution to this?
Hi all, I have problem with maphilight plugin only on IE 8 brawser, gnome and firefox go well.
I use this syntax
$(function() {
$(‘.map’).maphilight();
});
and i have more “map” tags in my page. One big map is substitue by other little map when a region is clicked.
Maphilight work good on the first one map but when someone click on region this map isn’t showen.
All map tags have “class=map” setted.
Anyone have an idea on why IE 8 don’t work well?
Pls help me
Do you plan to make maphilight work in IE9?
I’m afraid I don’t have any techie skills that might help.
Hi David – I found this a couple weeks ago, and ended up making a ton of changes and adding features to maintain selection state and bind the map to an external list. Since I’m planning actively improve it I decided to spin it off as a new plugin, check it out if you’re interested! Thanks for the great tool, I’m amazed how few such things there are available. Why use Flash when you can use javascript and have it work on iphones?
http://www.outsharked.com/imag…
Is there a way to incorporate an additional hover effect such as displaying a div with an image over the highlighted area?
Hi David,
how can I group areas with this plugin?