悬停时显示 gif 以调整大小的图像地图

Question

我正在开发我的个人网站，我的概念是主页是一个响应式图像地图，它是一张桌子表面的照片。桌子上的物品代表项目，当您将鼠标悬停在这些对象上时，会显示与对象交互的快速动画 gif（例如，如果是一杯咖啡、一条鱼跳出来或类似的东西）。

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

我现在需要的是在 mousein（或 mouseover）上的图像地图热点中显示 gif，并在 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>