圖像縮略圖，最大寬度和最大高度 - onmouseover，以某種方式查看更大的圖像

我已經設置了一個縮略圖以具有最大寬度和最大高度，並且需要設置某種onmouseover設置當它們懸停在圖像上時，它會向他們展示更大的圖像。圖像縮略圖，最大寬度和最大高度 - onmouseover，以某種方式查看更大的圖像

我不能使用鏈接來做到這一點。

任何想法？

HTML

<img src="imageurl" class="s3_right" style="max-width: 400px;">

我嘗試使用下面的代碼;然而，它會因爲我有一個最大寬度/最大高度而混亂。

HTML

<img src="image url" class="s3_right" onmouseover='Big(this);' onmouseout='Small(this);' style="max-width: 400px;">

的JavaScript

<script language=javascript> 
<!-- 
function Big(me) 
{ 
me.width *= 2; 
me.height *= 2; 
} 
function Small(me) 
{ 
me.width /= 2; 
me.height /= 2; 
} 
--> 
</script>

還有，也許X2會比實際的圖像大的問題。我不需要代碼來擴大比實際圖像大的圖像。所以我真的只需要代碼來設置一個新的最大寬度和最大高度或彈出圖像離開頁面的最大寬度和最大高度（如，實際上並沒有改變佈局，因爲圖像縮略圖顯示文字環繞它們。）

來源

2013-03-24 KDJ127

我發現http://scripterlative.com/files/magnifimage是一個偉大的代碼，並且完全符合我的要求，除了它需要使用鏈接。 – KDJ127 2013-03-24 22:28:17

是否有可能欺騙一個絕對定位的副本，以及縮略圖，嵌套在指定相對位置的包裝div中？

<style type="text/css"> 
    .meDiv 
    { 
     position:relative; 
     border:1px solid black; 
     width:200px; 
     height:100px; 
    } 

    .meSmall 
    { 
     display:block; 
     width:100%; 
     height:100%; 
    } 

    .meBig 
    { 
     z-index:10; 
     position:absolute; 
     left:0px; 
     top:0px; 
     display:none; 
     width:800px; 
     height:350px; 
    } 
</style> 

<div class="meDiv"> 
    <img class="meSmall" src="imageURL" onmouseover="Big();" /> 
    <img id="bigOne" class="meBig" src="imageURL" onclick="Small();" onmouseout="Small();" /> 
</div> 


<script language="javascript"> 
function Big() { 
    document.getElementById('bigOne').style.display = "block"; 
} 

function Small() { 
    document.getElementById('bigOne').style.display = "none"; 
} 
</script>

顯然給不會直接插入到你的方案或贏得任何獎項，但它只是給這個概念的想法的代碼。

使用此功能，您可以對包裝div和/或縮略圖（最大寬度/最大高度允許的錯誤）應用任何大小限制，而不會影響大圖像或移除任何包裝文本。如果你需要使用一些JavaScript黑巫術魔術（我自己是jQuery粉絲），你也可以使用縮略圖的特性來確定大圖像的特徵。

來源

2013-03-24 22:40:35 TheManWithNoName

完美！非常感謝！ – KDJ127 2013-03-24 23:32:15

沒問題。看看你在這個問題的評論中提到的'magnifimage';我相信它的確如此，但只是將相對於鼠標光標位置的絕對div定位（如果跨越屏幕一半以上則交換兩側）。 – TheManWithNoName 2013-03-25 20:30:25

是的，我聯繫了劇本的主人，並且發現了更多關於它的信息。從我發現的信息中發現，它被告知附加到標籤;然而，發現一旦我已經有另一種解決方案，它可以連接到img。 – KDJ127 2013-03-26 03:16:49

圖像縮略圖，最大寬度和最大高度 - onmouseover，以某種方式查看更大的圖像

回答

相關問題