Question

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

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

我现在需要的是让一个gif显示在mousein（或mouseover）上的imagemap热点中，并在mouseout上消失。它需要调整大小。

我的图片地图代码非常标准，我在本文末尾附上了它。

有没有人能想到让gifs出现在我想要的地方并通过浏览器窗口正确调整大小的方法？你认为我必须自己去搞乱插件代码以获得我想要的效果吗？提前感谢您的帮助！

    <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

查看此示例

＆＃13;

.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:"";
}

＆＃13;

<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>

＆＃13;

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

1 个答案: