0

I am using David Lynch's fabulous MapHighlight plugin with a custom version of a U.S. map. Unfortunately, some U.S. States (like Rhode Island) are extremely small. For this reason, I created boxes to the right of the map with abbreviations for some of these smaller States.

What I would like to be able to do is to have both the box and the map highlight at the same time when a user hovers over either the box or the State.

<area href="#" title="RI" shape="poly" coords="617,141, 617,138, 617,135, 616,131, 620,130, 621,131, 623,133, 625,136, 623,138, 622,137, 622,139, 620,140, 617,141, 617,141"/>
<area href="#" title="RI" shape="rect" coords="728,164,760,182"/>

Both items share the same time title. (For example, the title tag for Rhode Island is "RI")

Based on a sample on David Lynch's site, I thought perhaps it might be useful to do something like the following.

$('area[title]').mouseover(function() {
   $(this).mouseover();     
});

Unfortunately, this did not work and the event never seemed to fire--even though I tried a number of variations.

What can I do to synchronize these elements (in a generic way) and have all area tags with the same title to all highlight on mouseover/hover?

Manse
  • 37,765
  • 10
  • 83
  • 108
Anthony Gatlin
  • 4,407
  • 5
  • 37
  • 53

3 Answers3

5

Try ImageMapster out: http://www.outsharked.com/imagemapster

The default behavior should do what you want (see the demos page - the first example is a USA map).

In a fiddle: http://jsfiddle.net/juvyh/

Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
3

I'm aware this is an old question, however as explained in this SO question:
The maphilight function has a groupBy function. In your case you could do something like:

$('.mapimage').maphilight({ groupBy: 'title' });

Which will group by the area's title (although you can select any attribute of the area).

Community
  • 1
  • 1
Trayek
  • 4,410
  • 3
  • 24
  • 39
1

Try :

$('area').mouseover(function() {
    $('area[title="'+$(this).attr('title')+'"]').mouseover();
});

This handles the mouseover event on all area elements and then uses the title attribute to trigger the mouseover event on all matching areas with the same title

Manse
  • 37,765
  • 10
  • 83
  • 108