0

プロファイルの親指を大きくして実際に人物の顔を見ることができるようにするために使用する簡単なロールオーバースクリプトがあります。
Problem is when the image expands it is throwing off page layout。画像の右隅を同じままにして、左に拡大して古い画像やその他の画像をカバーする方法はありますか？

提案をありがとう。

<tr>
<td>Joe Smith</td>
<td>
<a href="detail.html" onmouseover="document.pic.src='images/smallpic.gif'" onmouseout="document.pic.src='images/bigpic.gif'">
<img src="images/bigpic.gif" width="147" height="82" border="0" name="pic" alt="pic" />
</a>
</td>
</tr>

次の人...

4

2 に答える 2

0

あなたの jsfiddle では、そこに行くスペースがないため、上と左に行くことはできません。

計算の代わりに固定値を使用するコードを次に示します。親指を使用して複雑にしたい場合は、読み込み中の画像を事前に読み込む必要があります。マウスがオーバーロードしたときに大きな画像を読み込み/読み込みを表示し、大きな画像が読み込まれた元の画像の src を設定し、スタイルをやり直します。

<!DOCTYPE html>
<html>
<head>
<script>
function expand(obj){
    obj.style.position="relative";
    obj.style.left="-100px";
    obj.style.top="-100px";
    obj.style.width="200px";
    obj.style.height="200px";
}
function smaller(obj){
    obj.style.position="static";
    obj.style.width="100px";
    obj.style.height="100px";
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
    <td colspan=2 style="height:150px">
        <p>Some text here Some text here Some text here Some text here 
        Some text here Some text here Some text here Some text here </p>
    </td>
</tr>
<tr>
    <td style="width:200px"></td>
    <td>
        <div style="width:100px;height:100px" id="needThisContainer">
            <img src="picture.jpg" style="width:100px;height:100px" 
                onmouseover="expand(this);" 
                onmouseout="smaller(this)"/>
        </div>
    </td>
</tr>    
</tbody>    
</table>
于 2013-01-20T04:42:19.263 に答える
0

position , height & widthまた、マウスオーバーとマウスアウトで画像を設定する必要があります。また、jquery でユーティリティを
使用することもできます。例はこちら..リンクthumbPopup

于 2013-01-20T03:53:15.690 に答える