Прошу помощи (jquery.maphilight.js)

[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

[рони]

SERblY,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

$('[id^=squidheadlink]').mouseover(function (e) {
            var id = '#squidhead'+ this.id.replace(/\D/g,'')
            $(id).mouseover();
        }).mouseout(function (e) {
            var id = '#squidhead'+ this.id.replace(/\D/g,'')
            $(id).mouseout();
        }).click(function (e) {
            e.preventDefault();
        });

есть также for в js и
.each() в jquery чтоб неписать повторы самому

[SERblY]

извиняюсь, не видел в редактроре форматирования, отформатировал!

[SERblY]

не работает так:

<script type="text/javascript">
    $(function() {
        $('.map').maphilight();
$('[id=^squidheadlink]').mouseover(function (e) {
            var id = '#squidhead'+ this.id.replace(/\D/g,'')
            $(id).mouseover();
        }).mouseout(function (e) {
            var id = '#squidhead'+ this.id.replace(/\D/g,'')
            $(id).mouseout();
        }).click(function (e) {
            e.preventDefault();
        });
            });
    </script>

Есть еще варианты, или мб что то не так делаю?

[рони]

SERblY,
перепутка ))) не =^ а ^=

[SERblY]

Работает! Рони Спасибо Большое, можно еще 1 вопрос?!

а обратный эффект как то можно прикрутить, тоесть все как есть сейчас, но чтобы при наведениии наоборот уже на <area, меняла бы стиль ссылка соответсвующего региона, ну например цвет бы меняля, без разницы стиль настроить можно...

[рони]

SERblY,

$('[id^=squidhead]').mouseover(function (e) {
            var id = '#squidheadlink'+ this.id.replace(/\D/g,'')
            $(id).css({color : '#FF0000'});
        }).mouseout(function (e) {
            var id = '#squidheadlink'+ this.id.replace(/\D/g,'')
            $(id).css({color : ''});
        })

[SERblY]

добавил так:

<script type="text/javascript">
    $(function() {
        $('.map').maphilight();
$('[id^=squidheadlink]').mouseover(function (e) {
            var id = '#squidhead'+ this.id.replace(/\D/g,'')
            $(id).mouseover();
        }).mouseout(function (e) {
            var id = '#squidhead'+ this.id.replace(/\D/g,'')
            $(id).mouseout();
        }).click(function (e) {
            e.preventDefault();
        });
$('[id^=squidhead]').mouseover(function (e) {
            var id = '#squidheadlink'+ this.id.replace(/\D/g,'')
            $(id).css({color : '#FFFFFF'});
        }).mouseout(function (e) {
            var id = '#squidheadlink'+ this.id.replace(/\D/g,'')
            $(id).css(color : '');
        })        
        
            });
    </script>

не работает, что я не так делаю?

<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>

и возник вопрос еще, когда подсветка все срабатывает, то при клике по сслке переход не работает, как исправить?
Спасибо огромное за помощь!

[рони]

SERblY,
а консоль ? F12
18 строка - обьект {}

[рони]

так вы клик по ссылке сами отменили

e.preventDefault();