1

我有一个复杂的图像映射,我需要能够在单独的计时器上“闪烁”每个<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)?

4

0 回答 0