0

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

4

1 回答 1

0

是否有可能只是欺骗一个绝对定位的副本以及缩略图，嵌套在一个分配了相对位置的包装 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-24T22:40:35.333 回答