顯示大圖的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>

不介意<a href的事情我只是用從W3學校的原始代碼...

PS也許我會問另外一個問題，放大圖像的問題已解決，但現在我希望它們顯示某種塊的原因，現在如果我甚至有4個圖像時，當我將最後一個圖像放大時，放大的圖像距離開始的位置，我想使它像畫廊一樣，所有圖像都不會顯示在那裏，不會外出的gallery.Any幫助下邊界也許另一個Qs的更好....

來源

2011-06-20 Leron

在你的CSS，你可以這樣做：

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 - 謝謝，我錯過了他們不屬於style屬性。 –

你必須寫：

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

回答

相關問題