当前位置：文江博客话题详情

如何在纯 HTML 页面上创建悬停显示的缩略图？

发布于 2024-12-13 10:04:25 字数 204 浏览 0 评论 0原文

我有一些大的 .png (.jpg, ...) 文件，几乎需要全屏才能查看。如何在标准 HTML 页面上创建缩略图？标签中是否有某种我错过的尺寸缩放控制？

当鼠标悬停在这样的缩略图上时可以显示大图像吗？（JavaScript 和 CSS 对于任一答案都可以）。

编辑：由于目标浏览器可能以不同的尺寸分辨率显示，因此如何使缩略图按比例缩放到网页/文本的显示尺寸？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放低过去 2024-12-20 10:04:25

这项技术实际上无异于烟雾和镜子，因为这两个图像都是直接编码在页面上的。然而，较大的图像通过 CSS 变得不可见，只有当访问者将鼠标悬停在链接上时才可见。单击该链接将在新页面中打开全尺寸图像。上图的编码为：

<div id="links" align="center">
  <div class="thumbnail" style="background-image: url(../thumbs/294.jpg)">
    <a href="../images/nebulan90.jpg" target="_blank">
    Nebula N90<img src="../images/nebulan90-s.jpg" alt="Nebula N90" /></a>
  </div>
</div>

分区内链接的图像通过 CSS 自动隐藏：

#links a img {
  height: 0;
  width: 0;
  border-width: 0;
}

由于所有图像都会自动隐藏，因此需要将缩略图显示为实际链接之外的背景图像。为了使链接在图像上工作并在图像下方（而不是图像上方）显示文本，有必要包含以下代码：

#links a {
  display:block;
  padding-top: 110px;
}

当光标悬停在链接上方时，较大的图像将显示在链接上方：

#links a:hover img {
  position: relative;
  top: -260px;
  left: -90px;
  height: 240px;
  width: 320px;
  border-width: 2px;
  border-color: #0ff;
}

The technique really amounts to smoke and mirrors, since both images are directly coded on the page. However, the larger image is made invisible through CSS and only becomes visible when the visitor hovers over the link. Clicking the link opens the full-size image in the new page. The image above is coded as:

<div id="links" align="center">
  <div class="thumbnail" style="background-image: url(../thumbs/294.jpg)">
    <a href="../images/nebulan90.jpg" target="_blank">
    Nebula N90<img src="../images/nebulan90-s.jpg" alt="Nebula N90" /></a>
  </div>
</div>

Images that are linked within the division are automatically hidden through CSS:

#links a img {
  height: 0;
  width: 0;
  border-width: 0;
}

Since all images are automatically hidden, it is necessary to display the thumbnail as a background image outside of the actual link. In order for the link to work over the image and display the text below the image (instead of over it), it is necessary to include this code:

#links a {
  display:block;
  padding-top: 110px;
}

The larger image is revealed above the link when the cursor is hovered over it:

#links a:hover img {
  position: relative;
  top: -260px;
  left: -90px;
  height: 240px;
  width: 320px;
  border-width: 2px;
  border-color: #0ff;
}

回复收藏 0 原文

~没有更多了~