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?