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

我有一些大的.png（.jpg，...）文件需要几乎全屏才能看到。如何在标准HTML页面上创建缩略图？标签中是否存在某种尺寸缩放控制，我不知怎的错过了？如何使用纯HTML页面上的悬停显示创建缩略图？

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

编辑：由于目标浏览器可能会显示不同的大小分辨率，我如何保持缩略图按比例缩放到网页/文本的显示大小？

2011-11-04 Ira Baxter

我知道这已被很好的回答，但只是说，你可以指定图像的高度和宽度在img标签。因此，您最初可以以小尺寸显示大图像，但对用户的带宽并不太好。 – paulmorriss

因此，image标签发送整个.png文件，并且远程浏览器执行缩放吗？我想这在浏览器的简单实现方面是有道理的。这可能不会很好，因为我们很可能在我们的许多网页上都有这个。所以我可能需要一个真正的缩略图来保持它很小？有没有一个标准的缩略图制作方式，还是只找到你最喜欢的图片编辑器，并告诉它缩放你的图片？如果目标浏览器显示不同的大小分辨率会发生什么？ –

是的，是的，找到你最喜欢的编辑器。我不太了解最后一个问题，但浏览器应该按照用像素指定的大小进行说明。 – paulmorriss

这项技术真的很像烟雾和镜子，因为这两个图像都直接编码在页面上。但是，较大的图像通过CSS隐藏，只有当访问者悬停在链接上时才会显示。单击该链接可在新页面中打开全尺寸图像。上图中被编码为：被划分内连接通过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>

图片：

#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; 
}

来源

2011-11-04 10:31:07 Arun

继我上面的评论。你知道在悬停发生之前浏览器是否加载了大图吗？ – paulmorriss

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

回答

相关问题