0

サムネイルを最大幅と最大高さに設定しました。画像にカーソルを合わせると、より大きな画像が表示されるように、ある種のマウスオーバー設定を設定する必要があります。

リンクを使用してこれを行うことはできません。

何か案は？

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が実際の画像よりも大きくなる可能性があるという問題もあります。実際の画像よりも大きく画像を拡大するためのコードは必要ありません。したがって、実際には、新しい最大幅と最大高さを設定するか、最大幅と最大高さでページから画像をポップアップするコードが必要になります（たとえば、画像のサムネイルがで表示されているため、実際にはレイアウトを変更しないでください）それらを囲むテキスト。）

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やサムネイル（max-width / max-heightで許可されているバグ）に必要なサイズ制限を適用できます。必要に応じて、サムネイルの特性を使用して大きな画像の特性を判断することもできます。これには、JavaScriptの黒いブードゥーマジックを少し使用する必要があります（私はjQueryファンです）。

于 2013-03-24T22:40:35.333 に答える