Question

我将缩略图设置为具有最大宽度和最大高度，并且需要设置某种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可能比实际图像大。我不需要代码来扩展图像比实际图像更大。所以我真的只需要代码来设置一个新的最大宽度和最大高度，或者用最大宽度和最大高度弹出页面上的图像（比如，实际上没有改变布局，因为图像缩略图显示为文字缠在他们身边。）

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和/或缩略图（具有max-width / max-height许可的错误）应用您想要的任何大小限制，而不会影响大图像或移除任何包装文本。你也可以使用缩略图的特征来确定大图像的特征，如果你需要使用一些JavaScript黑巫术魔法（我自己是一个jQuery粉丝）。

图像缩略图，最大宽度和最大高度 - onmouseover，以某种方式查看更大的图像

1 个答案: