How to link two ImageMap areas?

I have an image with complex poly areas setup to link to anchors within a page. In addition to this when hovered over the area is highlighted.

However I want this area to link up with a piece of text so that when either is hovered over they will both become highlighted.

I presumed if they held the same title and alt it would function in this manner.

Solution

Solution found. Below is the code from the fiddle I found that fixed the problem.

HTML

<!DOCTYPE html>
<body>
<div id="menu">
    <ul>
    <li class="menu-item-a"><a href="#">Part A</a></li>
    <li class="menu-item-b"><a href="#">Part B</a></li>
    <li class="menu-item-c"><a href="#">Part C</a></li>
    <ul>
</div>
<img id="house" src="http://also.kottke.org/misc/images/filip-dujardin.jpg" style="" usemap="#house-map">
<map name="house-map">
    <area shape="rect" name="part-a" coords="0,0,500,183" href="#" />
    <area shape="rect" name="part-b" coords="0,183,500,366" href="#" />
    <area shape="rect" name="part-c" coords="0,366,500,500" href="#" />
</map>
</body>
</html>

jQuery(document).ready(function ($) {
$('#house').mapster({
    mapKey: 'name',
    singleSelect: true,
    fillOpacity: 0.6,
    fillColor: 'FF0000',

    //
    onMouseover: function (evt) {
        var parts = evt.key.split('-');
        var part = parts[1];
        highlightArea(part);
    },

    //
    onMouseout: function (evt) {
        var parts = evt.key.split('-');
        var part = parts[1];
        highlightAreaX(part);
    }

});

    //
    $('a').hover(function () {
        var parts = $(this).closest('li').attr('class').split('-');
        var part = parts[2];
        highlightArea(part);
    });

    //
    $('a').mouseleave(function () {
        var parts = $(this).closest('li').attr('class').split('-');
        var part = parts[2];
        highlightAreaX(part);
    });



//
function highlightArea(key) {
$('area[name=part-' + key + ']').mouseenter();
$('a').removeClass('hover');
$('li.menu-item-' + key + ' a').addClass('hover');
}

//
function highlightAreaX(key) {
$('area[name=part-' + key + ']').mouseout();
$('li.menu-item-' + key + ' a').removeClass('hover');
}
});

The main reason this was hard was because unfortunate the fiddle closed the initial function halfway through the code, thus causing wordpress to only load half of it. To resolve this simply move "});" to the end as I have in the above example.