Question

鉴于我当前的代码，我将如何超链接图像，以便当用户单击图像时，浏览器打开一个新选项卡并显示图像？

body {
  margin: 0;
  padding: 0;
}

.img {
  display: grid;
  height: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

<div class="img"> <img class="center-fit" src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/1363px-Collage_of_Nine_Dogs.jpg'></div>

Answer 1

这是最简单的方法。

document.addEventListener('mousemove', function(e){
  event.preventDefault();

  // add a check here so it doesn't allow dragging the container up?
  var maxTop = window.innerHeight - divOverlay.offsetHeight;
  if(is_clicked){
    divOverlay.style.top  = Math.max(maxTop, e.clientY + top) + 'px';

    // if the box reaches 50px down, it should automatically hide it if the user
    //$('.box').slideUp();
  }
}, true);

您可以将锚标记（<a href='https://anywebsite.com/home'> <img class="center-fit" src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/1363px-Collage_of_Nine_Dogs.jpg' /> </a>）包裹在任何东西周围，它将超链接到任何东西。

您还可以添加<a href='...'> </a>，它将

超链接图像

1 个答案: