[SERblY]

Так как не разбираюсь в javascript на уровне програмиста, прошу помощи в доведении до ума следующего:
Стояла задача сделать карту регионов Росии и менюшку с сылками и названиями регионов, при наведении на ссылку, например "Красноярский край"? соответсвующая область карты <area...> должна подсвечиваться.
Долго блуждал по инету в итоге с помощью jquery.maphilight.js замострячил следующее:

Есть карта:

<map name="rf">\

  <!-- Белгородская область -->
  <area id="squidhead" href="{%$settings.patch%}Russia/Belgorodskaya_oblast/" title="Белгородская область" alt="" shape="poly" coords="38,305,38,310,42,314,46,315,47,318,48,322,48,326,49,328,54,323,55,316,54,312,51,309,47,308,41,304" onmouseover="">
  <span id="bgd">
  </span>
  <!-- Белгородская область -->
  <!-- Брянская область -->
  <area id="squidhead2" href="{%$settings.patch%}Russia/Bryanskaya_oblast/" title="Брянская область" alt="" shape="poly" coords="37,268,33,274,35,276,37,277,37,282,44,282,44,287,48,288,53,282,54,278,56,274,56,270,47,271,42,271" onmouseover="">
  <!-- Брянская область -->
  <!-- Владимирская область -->
  <area id="squidhead3" href="{%$settings.patch%}Russia/Vladimirskaya_oblast/" title="Владимирская область" alt="" shape="poly" coords="94,272,95,280,98,282,98,284,96,287,97,290,100,294,103,295,114,289,109,284,102,278,103,274,100,274,97,273" onmouseover="">
  <span id="vlad">
  </span>
  <!-- Владимирская область -->

У каждой области свой id.
Далее.. обычные линки соответсвующих областей:

<li class='tree'><a id="squidheadlink" class="regions" href='/Russia/Belgorodskaya_oblast/'>Белгородская обл.</a></li>
<li class='tree'><a id="squidheadlink2" class="regions" href='/Russia/Bryanskaya_oblast/'>Брянская обл.</a></li>
<li class='tree'><a id="squidheadlink3" class="regions" href='/Russia/Vladimirskaya_oblast/'>Владимирская обл.</a></li>

Чтобы подсвечивался регион на карте при наведении сделал так:

<script type="text/javascript">
    $(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            $('#squidhead').mouseover();
        }).mouseout(function(e) {
            $('#squidhead').mouseout();
        }).click(function(e) { e.preventDefault(); });
        $('#squidheadlink2').mouseover(function(e) {
            $('#squidhead2').mouseover();
        }).mouseout(function(e) {
            $('#squidhead2').mouseout();
        }).click(function(e) { e.preventDefault(); });
        $('#squidheadlink3').mouseover(function(e) {
            $('#squidhead3').mouseover();
    });
    </script>

Итог все работает , НО!

1. Регионов 83, вопрос как правильно написать код чтобы работало, неужели надо для каждого регионо копировать то что выше 1,2,3, ...83 для каждого id, как сделать это совершенее.
2. Мб кто то придложит вообще решенее лучше и т.д.

Если кто то сталкивался или может наставить на путь истиный в этом вопросе, за ранее Благодарю!

Подсветку области по наведению взял отсюда:
http://davidlynch.org/projects/maphi...mo_simple.html