изменение fillColor области при нажатии с помощью плагина Jquery maphilight - PullRequest
Новая
       31

изменение fillColor области при нажатии с помощью плагина Jquery maphilight

2 голосов
/ 03 марта 2012

Я использую плагин JQuery maphilight для выделения областей на карте мира.Прямо сейчас я установил следующие параметры по умолчанию для элементов области 

fillColor: 'F25607' //orange color
alwaysOn:  'true'

, чтобы при загрузке страницы элементы области были окрашены в оранжевый цвет.У меня есть событие onclick для каждого элемента области.Мне нужно изменить цвет выделения (т. Е. FillColor) элемента на карте, на который щелкнули мышью, на другой цвет, например зеленый, когда я щелкаю другой элемент на карте, этот элемент должен измениться на зеленый, а предыдущий выбранный элемент должен измениться на оранжевый,Вот пример кода моей карты 

<img id="theImg" class="map" src="/gra/images/worldblank.png" usemap="#worldmap" />
<map id="worldmap" name="worldmap">
      <area class='area' shape="circle" alt="Israel" title="Israel" coords="423,232,7" href="#" onclick="loadActivity('Israel');" />
      <area class='area' shape="circle" alt="China" title="China" coords="548,229,5" href="#" onclick="loadActivity('China');"  />
</map>

пример функции js, который должен быть выполнен, будет: 

<script>
jQuery(document).ready(function(){
        jQuery('.map').maphilight();
    });

$(function() {
  $('.area').click(function(e) {
e.preventDefault(); // from the samples, i guess used to overrride default options
// get the clicked area element and set its fillColor to green 
// make the previous selected area fillColor to the default options value  (if we need to do this)
// use the trigger function to trigger this change
    });
 });
</script>

Ответы [ 2 ]

3 голосов
/ 08 апреля 2012

Надеюсь, это поможет вам: 

<script>
$(function() {
  $('.area').click(function(e) {
    e.preventDefault();
    var data = $(this).data(maphilight) || {};
    data.fillColor = 'FF0000'; // Sample color

    // This sets the new data, and finally checks for areas with alwaysOn set
    $(this).data('maphilight', data).trigger(alwaysOn.maphilight);
  });
});
</script>

Источник: Пример из официальной документации .

0 голосов
/ 16 декабря 2012

Это так просто, перейдите по этой ссылке http://davidlynch.org/projects/maphilight/docs/, затем откройте файл jquery.maphilight.min.js и измените цвет заливки на любой цветовой код, который вам нравится.Надеюсь, это сработало!

...