如何在纯HTML页面上创建带有悬停显示的缩略图？
如何在纯HTML页面上创建带有悬停显示的缩略图？
提问于 2011-11-04 17:58:53
我有一些大的.png (.jpg，...)需要几乎全屏才能看到的文件。如何在标准HTML页面上创建缩略图？在标签中有没有什么我遗漏的尺寸缩放控件？
当鼠标悬停在这样的缩略图上时，是否可以显示较大的图像？(JavaScript和CSS对于任何一个答案都是可以的)。
编辑:由于目标浏览器可能以不同的大小分辨率显示，我如何保持缩略图按比例缩放到网页/文本的显示大小？
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-11-04 18:31:08
这项技术实际上等同于烟雾和镜子，因为两个图像都是直接在页面上编码的。但是，较大的图像通过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;
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8008540
复制相关文章
相似问题
腾讯云开发者
