jquery - 在悬停时显示 gif 以获取可调整大小的图像映射

Question

我在我的个人网站上工作，我的想法是主页是一张响应式图像 map ，它是一张 table 表面的照片。 table 上的元素代表元素，当您将鼠标悬停在这些对象上时，快速动画 gif 会显示与这些对象的交互(例如，如果是一杯咖啡，一条鱼跳出来或类似的东西)。

我有一个使用这个 JQuery 插件的响应式图像映射:https://github.com/davidjbradshaw/image-map-resizer

我现在需要的是让 gif 在 mousein(或 mouseover)时显示在图像 map 热点中，并在 mouseout 时离开。它需要使用 .

我的图像映射代码非常标准，我已将其附加在本文末尾。

谁能想出一种方法让 gif 显示在我想要的位置并在浏览器窗口中适当调整大小？你认为我必须自己去弄乱插件代码才能获得我想要的效果吗？预先感谢您的帮助!

    <div class="map">
        <img src="img/flatlay_sample.jpg" class="bg" id="bestmap" alt="image map" usemap="#image_map" width="1500" height="1101" orgWidth="1500" orgHeight="1101">

        <map name="image_map" id="bestmap"> 

            <area id="phone" alt="" title="phone" href="http://www.image-maps.com/" shape="poly" coords="869,356,983,270,1190,518,1072,617,958,484" style="outline-color:red;" target="_self"     />
            <area id="coffee" alt="" title="coffee" href="http://www.image-maps.com/" shape="poly" coords="370,604,408,540,433,611,508,659,521,755,461,835,335,837,285,771,297,660" style="outline:none;" target="_self"     />

        </map> 

    </div>

Answer 1

你可以只使用 html 和 css + jquery 或 javascript 来做到这一点，插件会使它变得更复杂，

看这个例子只使用html+css

---

.container{
  width:100%;
  margin-top:10%;
}
img {
  width:100%;
  position:relative;
  z-index:9;
 }
.coffe , .cup {
  position:relative;
  width:100%;
}
.cup:before {
   position:absolute;
   
   width:150px;
   height:150%;
   background-image:url('https://www.amazing-animations.com/animations/fish54.gif');
   background-repeat:no-repeat;
   z-index:10;
   top:-80px;
   left:50%;
   transform:translateX(-50%);
}

.cup:hover:before{
   content:"";
}

<div class="container">
<div class="coffe">
<div class="cup"><img src="https://pics.clipartpng.com/midle/Coffee_Cup_PNG_Clipart-401.png" /></div>
</div>
</div>