Авто-подсветка изображения карты областей на таймерах (не при наведении)? - PullRequest
Новая
       46

Авто-подсветка изображения карты областей на таймерах (не при наведении)?

1 голос
/ 03 ноября 2019

У меня сложная карта изображения, и мне нужно иметь возможность «моргать» каждый <area> на отдельных таймерах , вместо зависания мыши, влияющего на него.

Я предполагал, что это будет просто с чем-то вроде , но мне не хватает опыта работы с jQuery (и я не уверен, позволит ли он игнорировать мышь и / или программно выделять области?)

Запустите приведенный ниже фрагмент для рабочих примеров того, как области будут «мигать», если используются CSS-анимации, и карты изображений, выделенной при наведении курсора мыши. Если я не могу управлять выделением с помощью CSS-анимации, есть ли другой способ?

Я открыт для использования чего-то другого, кроме - надеюсь, используя мою существующую карту / координаты? (Может быть и т. Д.?) Подойдет лучше?)

Любые идеи приветствуются. 

$.fn.maphilight.defaults = {
  fill: true,
  fillColor: '000080',
  fillOpacity: 0.90,
  stroke: false
}     
                                                 
$(function() {
  $('.things').maphilight();
});
html {
  font-family: Calibri;
  font-size: 18px;
  background-color: Plum;
}

.blinkers {
  border-radius: 50%;
  border: 4px solid black;
  font-size: 21px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  padding: 22px;
  display: inline-block;
}

@keyframes blink {
 0%   { color: Snow; font-weight: 900; background-color: Navy; }
 15%  { color: Aqua; font-weight: 700; }
 100% { color: Navy; background-color: Snow; }
}

@-webkit-keyframes blink {
 0%   { color: Snow; font-weight: 900; background-color: Navy; }
 15%  { color: Aqua; font-weight: 700; }
 100% { color: Navy; background-color: Snow; }
}

.blink1 { animation: blink 2000ms infinite; -webkit-animation: blink 2000ms infinite; }
.blink2 { animation: blink 3000ms infinite; -webkit-animation: blink 3000ms infinite; }
.blink3 { animation: blink 4000ms infinite; -webkit-animation: blink 4000ms infinite; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>

This is similar effect to what I need, using <b>css animations</b>:<br>

<div class="blinkers blink1">thing1</div>
<div class="blinkers blink2">thing2</div>
<div class="blinkers blink3">thing3</div>

<hr> My <b>image map</b> highlights on mouseover:<br>
<img src="https://i.imgur.com/ANKlNGd.png" class="things" usemap="#image-map">
<map name="image-map">
  <area id="thing1" href="#" coords="52,52,47"  shape="circle">
  <area id="thing2" href="#" coords="157,52,47" shape="circle">
  <area id="thing3" href="#" coords="262,52,47" shape="circle">
</map>


<hr> ...but how to get the image map <code>&lt;area></code>'s to auto-highlight on individual timers (and ignore the mouse)?
...