は、私はこの単純なスクリプトを使用CSSやonMouseOverの

と拡大画像を表示：は、私はこの単純なスクリプトを使用CSSやonMouseOverの

<body> 
<script type="text/javascript"> 
function mouseOver() 
{ 
document.getElementById("img1").src ="images/p2.jpg"; 
} 
function mouseOut() 
{ 
document.getElementById("img1").src ="images/p1.jpg"; 
} 
</script> 
<div class="img"> 
<a target="_blank" href="images/p1.jpg"><img src="images/p1.jpg" alt="Klematis" width="110" height="90" id="img1" onMouseOver= "mouseOver()" onMouseOut="mouseOut()"/></a> 
<div class="desc">Add a description of the image here</div> 
</div>

画像をかなり大きいですので、私は私がちょうど関数を呼び出す場合、私はだろうと思った、幅と高さのプロパティでそれらを調整します大きな画像を見るが、それは起こらない。だから、onMouseOverで拡大した画像を見るには何ができますか？私はそれが重要な場合には、スタイルシートを追加します：

<style type="text/css"> 
div.img 
{ 
    margin: 2px; 
    border: 1px solid #0000ff; 
    height: auto; 
    width: auto; 
    float: left; 
    text-align: center; 
} 
div.img img 
{ 
    display: inline; 
    margin: 3px; 
    border: 1px solid #ffffff; 
} 
div.img a:hover img {border: 1px solid #0000ff;} 
div.desc 
{ 
    text-align: center; 
    font-weight: normal; 
    width: 120px; 
    margin: 2px; 
} 
</style>

は、私はちょうどW3学校からの生のコードを使用し<a href事を気にしないでください...

たぶんPS私はこれについて別の質問をしますが、拡大された画像の問題は解決されましたが、今では、拡大画像が遠くから離れていく最後の画像に4倍のぼかしがあれば、開始場所、そして私はそれをギャラリブロックと同じようにしたい、そして、すべての画像をそこに表示する、外に出ることはないあなたが書かなければならないgallery.Anyのヘルプまたは多分別のQsのより良いの国境....

出典

2011-06-20 Leron

あなたがこれを行うことができます：あなたが必要となる

div.img img { height: 90px; width: 110px; } 
div.img img:hover { height: auto; width: auto; }

出典

2011-06-20 13:49:32

実際、CSSスタイルはhtmlスタイルを上書きします。あなたはそれが要素CSS（style = "..."）であれば正解でしょう。 – Kraz

@Kraz - ありがとう、私は彼らがスタイル属性にないことを忘れました。 –

：あなたのCSSで

img:hover { 
    width: 120px; 
}

出典

2011-06-20 13:47:58 Sebastian

をそれに応じて高さと幅を調整してください：

function mouseOver() 
{ 
var img1 = document.getElementById("img1"); 
img1.src ="images/p2.jpg"; 
img1.width = ""; 
img1.height = ""; 
} 
function mouseOut() 
{ 
var img1 = document.getElementById("img1"); 
img1.src ="images/p1.jpg"; 
img1.width = "90"; 
img1.height = "110"; 
}

最近では、CSSを使用することが推奨されていますEmilが提案したように。

出典

2011-06-20 14:27:17

は、私はこの単純なスクリプトを使用CSSやonMouseOverの

答えて

関連する問題