我有六張圖片，懸停時如何顯示一張大圖？

當我把鼠標放在六個較小的圖像上時，我想要做的是揭示六個較大圖像之一。我有六張圖片，懸停時如何顯示一張大圖？

大圖像將由六個較小的佔位符組成。

附圖顯示了我想要做的幾個例子。

感謝您對此的任何答案。

enter image description here

來源

2011-08-19 mm-93

一些代碼將是非常有幫助的。如果您可以在每個州發佈html或創建jsfiddle，我們可以幫助您。 – Jasper

不是真的很自豪這一點，但它做你所問。

http://jsfiddle.net/imoda/N4aFP/2/

var srcs; 

srcs = new Array(); 

var i = 0; 

$('img').each(function(){ 

    srcs[i] = $(this).attr('src'); 

    i++; 
}); 

$('img').hover(function(){ 

    $('img').attr('src', $(this).attr('src')); 
},function(){ 

    restore(srcs); 
}); 

function restore(srcs) { 

    i = 0; 

    $('img').each(function(){ 

     $(this).attr('src', srcs[i]); 

     i++; 
    }); 
}

來源

2011-08-19 23:58:39

非常感謝您的回覆......您的答案與此不同：http://jsfiddle.net/vkAbg/2/我不確定哪個是最佳解決方案... –

看起來像是將圖像放入一個新的對象「多圖像」，然後將其疊加到頁面上。所以你有一個1-6層，然後是一個N×6層出現在上面。我只是替換了src屬性，所以你只有6張圖片，沒有hokey pokey –

你的意思是這樣嗎？

http://jsfiddle.net/vkAbg/

$('#images img').mouseover(function(){ 
    $('#more-images img').remove(); 
    for(var i = 0; i < 6; i++) 
    { 
     $('#more-images').append($(this).clone()); 
    } 
});

這裏有一個更新的例子多帶幾個圖片：http://jsfiddle.net/vkAbg/1/

UPDATE

基於您的評論，這裏是什麼似乎更喜歡你的需求的更新：

http://jsfiddle.net/vkAbg/2/

來源

2011-08-19 23:20:01

爲什麼選擇javascript？ – sg3s

@ sg3s：因爲OP想要一個jQuery解決方案。 – Sparky

+1好主意將懸停圖像放在縮略圖下方/旁邊，而不是OP頂部，因爲OP會遇到嚴重的可用性問題。 – jeroen

因此，像這樣：

http://jsfiddle.net/awy8F/6/

看我如何加入一個形象，你的形象，以一個班，確保它僅適用於第一方陣。

這應該對你有幫助嗎？這只是改變背景圖像的css位置...

來源

2011-08-19 23:20:44 sg3s

這是什麼？這甚至不是部分解決方案。 – Sparky

我沒有保存jsfiddle： -/ – sg3s

這應該可能會被刪除，直到你得到一個真正的答案更新。 – Sparky

我有六張圖片，懸停時如何顯示一張大圖？

回答

相關問題