Question

[enter code here][1]我正在尝试在图像上映射区域。该图像是turn.js代码的一部分。这是杂志翻转，但是现在我想要图像上的可点击区域。我不知道该怎么办，我觉得JS代码正在覆盖可点击区域。有人可以帮我吗？会很棒。

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>turn.js</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body background="BOOKLETS/background.jpg" >
  <div id="magazine">
    <div>
      <span class="text">
        <img class="img-fluid" src=BOOKLETS/test1.jpg>
      </span>
    </div>

    <div>
      <span class="text">
        <a herf="www.youtube.com">
          <img class="img-fluid" src="BOOKLETS/test2.jpg" usemap="#image-map">
            <map name="image-map">
              <area href="www.youtube.com" coords="1430,1440,931,816"  shape="rect">
            </map>
        </a>
      </span>
    </div>

    <div>
      <span class="text">
        <img class="img-fluid" src=BOOKLETS/test3.jpeg>
      </span>
    </div>

    <div>
      <span class="text">
        <img class="img-fluid" src=BOOKLETS/test4.jpg>
      </span>
    </div>    
  </div>

  <script  src="js/index.js"></script>

</body>

</html>

使用turn.js在图像上映射图像区域

0 个答案: