图像缩略图，带有max-width和max-height——onmouseover，以某种方式查看更大的图像

Question

我已经为缩略图设置了max-width和max-height，并且需要设置一些onmouseover设置，当他们将鼠标悬停在图像上时，它会显示一个更大的图像。

我不能使用链接来做这个。

任何想法?

html

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

我尝试使用下面的代码;然而，它搞砸了，因为我有一个max-width/max-height。

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可能会比实际图像大。我不需要代码将图像扩展到比实际图像更大的地方。所以我真的只需要代码来设置一个新的max-width和max-height，或者用max-width和max-height将图像弹出页面(比如，实际上不改变布局，因为图像缩略图是用文本包围的)

Answer 1

是否有可能欺骗绝对定位的副本，以及缩略图，嵌套在分配相对位置的包装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和/或缩略图(bug与max-width/max-height允许)，而不影响大图像或移位任何包装文本。如果需要的话，您还可以使用缩略图的特征来确定大图的特征，方法是使用一点JavaScript黑巫术(我自己就是一个jQuery粉丝)。