In order to know where you may have gone wrong, you'll have to say where you are currently. What OS are you using, what have you managed to implement, what isn't working exactly? are you getting error messages? or is something not installing? or you are getting maps but no hover?? Because once someone knows where you are they can better guide you to where you need to look next.

If you don't need the vectory-ness, this can be done with lots of handwork with pure CSS as well. It's less handwork if you already have the images you need (example). Though the vector version seems to have many advantages.

The basic idea is to have some kind of relation between the link attributes in your html and the region attributes in your jvectormap object.

After that, you can implement a simple algo to look for the region and trigger the setHovered(true) and setHovered(false) on that particular region. I've done something like this for markers, using <a> elements.

After that, you can implement a simple algo to look for the region and trigger the setHovered(true) and setHovered(false) on that particular region. I've done something like this for markers, using <a> elements.

What myty and poes are getting at is that you have to help us to help you.

Try and set up the map plugin is a JS fiddle and add to add the required functionality on your own.As you stated yourself, your JS knowledge is basic, so presumably you'll get stuck at some point.When this happens, post back here and I'm sure someone will be able to help.

Doing it this way just means that we don't have to do everything from scratch for you.

This is probably no help whatsoever but I uploaded a test here that allows regions to be highlighted by a separate label and vice versa. I only added two countries but the format would be the same for all countries but the code needs to be simplified as you don't want to call it for every country like that but that is beyond my meagre skills.

However you would need to repeat that for all the ids so it needs one of our js experts to make it work automatically. If for example the "AU" part of "AU: '#f00f00'" could be gained from the id of the list item that was hovered then you would only need the one routine.

Hopefully one of the others here can simplify into a single routine.:)

The problem is solved, for the first time, because I have read every post trying to do this same effect in all the forums and sites on JVectorMap and vector maps in general and there is no one offering a valid solution.

I can see how some of what I said goes over your head, since you're just starting, and that's why I asked for a live playground. This is a reply to what I believe to be a complete unfounded remark about no one offering a valid solution. stackoverflow is giving you the right answer (if only for selected part), and I provided more than enough info for you to build a working example, complete with hovered part.

Now, Paul's maybe works, but it's a dirty one, with many caveats, the biggest being the weak JS code in it, the second biggest being the complete disregard for the unified CSS style used in jvectormap.

The map has hover and selected styles for markers and regions, available as properties for the map object. Paul, on the other hand, is creating its own style, and, what's worse, he's controlling style from JS (what I mean is that while changing class attribute values is OK, hardcoding CSS values with JS isn't OK at all).I mean, Paul, really?!

set option, value This method could be to used to change any option except the callbacks after map initialization.

$('#map').vectorMap('set', 'colors', {us: '#0000ff'});

Obviously I latched on to what I understood and I'm sure there's a much better way to do this. It was really just a proof of concept to see if I could get something working with my limited knowledge of Jquery (as I mentioned before) and to spark a discussion like this

I did start with a caveat that it was probably no use whatsoever but at least I tried