Question

所以我正在使用image map generator为我的图像创建一个地图区域。所有工作区域都期望图像底部的一个区域比我设置的区域更高（在宽度方向）。

这是代码。问题出现在第二张幻灯片上，该区域应位于以“单击此处进行处方...”开头的下部蓝色横幅的顶部：

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="ad.size" content="width=350,height=250">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
</head>
<style>
  body {
    width: 350px;
    height: 250px;
  }
</style>

<body>
  <div class="owl-carousel">
    <div class="item" id="slide-1">
      <img src="https://i.imgur.com/YQcvYHL.jpg" alt="Slide 1" class="img" id="img-1" usemap="#slide1-map">
    </div>
    <div class="item" id="slide-2">
      <img src="https://i.imgur.com/CMHq1tK.jpg" alt="Slide 2" class="img" id="img-2" usemap="#slide2-map">
    </div>
  </div>
  <map name="slide1-map">
    <area shape="rect" coords="11,53,149,173" href="https://www.janssenmedicalcloud.co.uk/" alt="Janssen Medical Cloud"
          target="_blank">
    <area shape="rect" coords="149,52,287,151" href="https://www.janssenmedicalcloud.co.uk/velcade/" target="_blank"
          alt="Velcade">
    <area shape="rect" coords="101,174,264,218" href="https://www.janssen.com/oncology/" target="_blank"
          alt="Janssen Oncology">
    <area shape="rect" coords="2,177,91,249" href="https://www.janssen-pi.co.uk/velcade/" target="_blank"
          alt="Velcade Prescribing Information">
</map>
  <map name="slide2-map">
    <area shape="rect" coords="12,95,139,209" href="https://www.janssenmedicalcloud.co.uk/" target="_blank"
          alt="Janssen Medical Cloud">
    <area shape="rect" coords="144,126,296,204" href="https://www.janssenmedicalcloud.co.uk/velcade" target="_blank"
          alt="Velcade">
    <area shape="rect" coords="4,225,297,247" href="https://www.janssen-pi.co.uk/velcade/" target="_blank"
          alt="Velcade Prescribing Information">
</map>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
  $(document).ready(function() {
    $('.owl-carousel').owlCarousel({
      items: 1,
      lazyLoad: true,
      loop: true,
      margin: 10,
      autoplay: true,
      autoplayTimeout: 7500,
      autoplayHoverPause: false,
    });
    setTimeout(function() {
      $('.owl-carousel').trigger('stop.owl.autoplay');
    }, 15000);
  })
</script>

</html>

地图区域-图像底部的区域不起作用

0 个答案: