图像缩略图，最大宽度和最大高度 - 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，以某种方式查看更大的图像

回答

相关问题