如何使用純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頁面上的懸停顯示創建縮略圖？

回答

相關問題