我有一个复杂的图像映射,我需要能够在单独的计时器上“闪烁”每个<area>
,而不是鼠标悬停影响它。
我曾认为使用maphilight 之类的东西会很简单,但我缺乏 jQuery 经验(我不确定它是否会让我忽略鼠标和/或以编程方式突出显示这些区域?)
运行下面的代码片段,了解区域如何“闪烁”的工作示例,如果使用 CSS 动画,以及鼠标悬停时突出显示的图像映射。如果我无法使用 CSS 定时动画控制突出显示,还有其他方法吗?
我愿意使用除maphilight以外的其他东西- 希望使用我现有的地图/坐标?(也许imagemapster等?)会更适合?)
任何想法表示赞赏。
$.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><area></code>'s to auto-highlight on individual timers (and ignore the mouse)?