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

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Прошу помощи (jquery.maphilight.js) (https://javascript.ru/forum/misc/45649-proshu-pomoshhi-jquery-maphilight-js.html)

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

Так как не разбираюсь в 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. Мб кто то придложит вообще решенее лучше и т.д.

Если кто то сталкивался или может наставить на путь истиный в этом вопросе, за ранее Благодарю!
:help:
Подсветку области по наведению взял отсюда:
http://davidlynch.org/projects/maphi...mo_simple.html

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

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

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

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

$('[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 чтоб неписать повторы самому

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

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

<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,
перепутка ))) не =^ а ^=

Работает! Рони Спасибо Большое, можно еще 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 : ''});
        })

добавил так:

<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();

да я не так силен, так сказать, просто взял конструкцию из источника вышеуказаного и приминил, так что Вы уж извините, но не подскажете как всетаки сделать чтобы работало все! Спасибо!

SERblY,
так уберите

.click(function (e) {
            e.preventDefault();
        });

и поправьте $(id).css({color : ''});

Спасибо Вам, Вы мне очень помогли, оставлю прямую ссылку на Ваш форум на сайте!
А Вам лично еще раз огромное спасибо!

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

SERblY,

Цитата:

Сообщение от рони

$(id).css({color : '',backgroundColor:'#FFFF00',fontSize:'24px'});

читайте букварь по jquery
$(id).addClass('red')
$(id).removeClass('green')

Спасибо! я неправильно писал как и думал )

Спасибо! что показали решение,все работает, сделал так:

<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();
        })
$('[id^=squidhead]').mouseover(function (e) {
            var id = '#squidheadlink'+ this.id.replace(/\D/g,'')
            $(id).addClass("regionlinkmap");
        }).mouseout(function (e) {
            var id = '#squidheadlink'+ this.id.replace(/\D/g,'')
            $(id).removeClass("regionlinkmap");
        })        
        
            });
    </script>

----------------------------
До полного счастья немогу не задать еще вопрос, можно как то передавать title? тоесть мы наводим на ссылку -подсвечивается соответсвующаяя area и наоборот, наводим на area - подсвечивается ссылка - все супер, а можно сделать еще чтобы при наведении на область (area) или ссылку, title от ссылки или area соответсвующей, например title="Владимирская область", передавалось бы в другой элемент, например в тег <h1>сюды</h1> (в заголовок над картой).

SERblY,
добавьте id заголовку

$(function() {
        $('.map').maphilight();
$('[id^=squidheadlink]').mouseover(function (e) {
            var id = '#squidhead'+ this.id.replace(/\D/g,'');
            $(id).mouseover();
            $('h1').html(this.title);
        }).mouseout(function (e) {
            var id = '#squidhead'+ this.id.replace(/\D/g,'');
            $(id).mouseout();
            $('h1').html('Сюды');
        })
$('[id^=squidhead]').mouseover(function (e) {
            var id = '#squidheadlink'+ this.id.replace(/\D/g,'');
            $(id).addClass("regionlinkmap");
            $('h1').html(this.title);
        }).mouseout(function (e) {
            var id = '#squidheadlink'+ this.id.replace(/\D/g,'');
            $(id).removeClass("regionlinkmap");
            $('h1').html('Сюды');
        })

            });

а самому подумать ?

да пробовал естественно сам, че людей зря тревожить, не получается, вот на Ваших примерах и учусь, в интернете что странно странно обычно куча всяких решений по любому вопросу, никогда небыло проблем особых, но вот по этой тематике внятного вообще нечего нету, вот только Вы и Ваш форум спасают)))

SERblY,
возможно строки 6 и 10 лишние -- достаточно title из map

Все работает :yes: , тебе просто ОГРОМНЫЙ РЕСПЕКТИЩЕ!!! , я неделю ковырялся в поисковиках пока тут не зарегистрировался!