时间戳

首页 > 解决方案 > 为什么响应式图像地图插件不起作用？

javascript - 为什么响应式图像地图插件不起作用？

问题描述

我有一张上面有地图的图片，用来制作可点击的元素。图像是响应式的，以适应不同的屏幕宽度。当图像被调整大小时，图像映射链接会中断，并指向错误的位置，这是可以预见的。

我希望它的行为方式是链接保留在正确位置的图像上，即使在调整大小时也是如此。

我曾尝试使用此插件 https://github.com/davidjbradshaw/image-map-resizer

我也尝试过使用这个插件 https://github.com/stowball/jQuery-rwdImageMaps

在这两种情况下，我都按照指示正确安装了脚本，并且我的图像映射不起作用的方式没有任何差异。我的代码中是否存在我遗漏的问题？有没有更好的工具，对于相对初学者来说实施起来相对简单？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  width: 99%;
  height: auto;  
}
</style>
    <link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"><img src="LOGO.png" width="50" height="50" alt=""/> <a class="navbar-brand" href="Home.html">Business Name</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"> <a class="nav-link" href="blog.html">Blog&nbsp;</a></li>
      <li class="nav-item"> <a class="nav-link" href="aboutus.html">About Us<span class="sr-only">(current)</span></a></li>
      <li class="nav-item"> <a class="nav-link" href="forum.html/">Forum&nbsp;</a></li>
      <li class="nav-item"> <a class="nav-link" href="performance.html">Performance</a></li>
      <li class="nav-item"> <a class="nav-link" href="contactus.html">Contact Us&nbsp;</a></li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
    


<img src="home.png" alt="" width="1920" height="1020" usemap="#banners" class="responsive">
<map name="banners">
  <area shape="rect" coords="946,3,1162,218" href="forum.html">
</map>
<script>$('map').imageMapResize();</script>
</body>
    

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script src="js/imageMapResizer.js"></script>
</html>

标签： javascriptresponsive-designimagemap

解决方案

推荐阅读