使用 iframe 缩略图创建 link

Question

我正在尝试制作作品集页面，我想使用我的一个项目（实时页面）的缩略图作为该项目的 link。我已经制作了缩略图，但不知道如何使它成为可点击的 link。

到目前为止，这是我的代码：

<div class="thumbnail-container">
    <div class="thumbnail">
      <figure>
          <iframe src="https://codepen.io/valsburger/full/wppwmJ " scrolling="no">
          </iframe>
      </figure>
    </div>
</div>

我试过在多个位置围绕 iframe 放置一个元素。似乎没有任何效果。

Answer 1

iframe 是 "window into another world"。 window 中可能有很多 link。因此，如果您可以 link iframe 本身，那将是一个坏主意。一个 iframe 被嵌入，你不能 link 它。

坦率地说，我不确定您为什么首先想要 link 一个 iframe？我觉得很奇怪。你为什么不 link 缩略图本身？那只是一个普通的 img 元素。

Answer 2

不要这样做，会导致您的页面变慢，坦率地说，这是不必要的。

这是您要访问的页面的照片：这是您应该使用的代码：

<div class="thumbnail-container">
    <div class="thumbnail">
      <figure>
          <img src="https://i.stack.imgur.com/7y4fc.jpg">
      </figure>
    </div>
</div>

Answer 3

一个丑陋的解决方案是在 <iframe> 的顶部放置一个透明的、相对定位的 <div>，将其调整大小以覆盖 <iframe> 并将其包裹在 <a> 标签链接到您的页面。尽管我建议使用常规 <img> 元素作为缩略图。

使用 iframe 缩略图创建 link

Create a link with an iframe thumbnail

html

iframe

thumbnails

hyperlink