懸停時更改圖像

我想更改懸停時的圖像。我寫了下面的代碼：懸停時更改圖像

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Selecting Images 
     </title> 
    </head> 
    <body> 
      <h1> Image Roll over </h1> 

      <a href="#"> 
       <img src="first.gif" width="100px" height="50px" name="button"/> 
      </a> 
      <a href="#" 
onmouseover="document.images.button.src='second.gif'" 
onmouseout="document.images.button.src='first.jpg' " > 
    </body> 
</html>

但我無法加載page.After檢查控制檯上的圖像，我得到了以下的輸出： GET文件：/// C：/用戶/馬里蘭州％203Shahjahan /Documents/mystuff/first.gif網:: ERR_FILE_NOT_FOUND

來源

2014-04-19 jahan

哪個網址您使用的訪問網站？ –

嘗試複製一些'first.jpg'和'second.gif'圖像到文件夾'C：/ Users/Md 3Shahjahan/Documents/mystuff' –

我沒有訪問任何網站。我已經把它指向'＃'（不在哪裏）。 – jahan

你a標籤顯然錯過了結束標籤，你需要添加一些文本，以及像這樣：

<a href="#" onmouseover="document.images.button.src='second.gif'" 
      onmouseout="document.images.button.src='first.gif'">Hover me</a>

注意：你不應該使用inli ne腳本。這裏是demo

看起來你可能要處理的圖像本身懸停，所以它應該是這樣的：

<a href="#" onmouseover="document.images.button.src='second.gif'" 
      onmouseout="document.images.button.src='first.gif'"> 
    <img src="first.gif" width="100px" height="50px" name="button"/> 
</a>

Updated demo。

來源

2014-04-19 01:34:55

但是文件未找到錯誤呢？ – jahan

@jahan如果您將文件複製到所報告的文件夾（即「C：/ Users/Md 3Shahjahan/Documents/mystuff」），那麼應該不會出現該錯誤，當然在我看來，您的HTML文件已經位於該文件夾。 –

是的，你是正確的。但如何解決它。如果我會通過你的方法，它會解決這個問題.. – jahan

我會用CSS來處理，而不是JavaScript的是清潔的這些，它會在所有瀏覽器作品Fiddle demo here

HTML

<h1> Image Roll over </h1> 
<a href="#"> </a>

CSS

a { 
    display: inline-block; 
    width: 100px; 
    height: 50px; 
    background-image: url('http://placehold.it/100x50'); 
} 

a:hover{ 
    background-image: url('http://placekitten.com/100/50') 
}

來源

2014-04-19 01:52:15 Moes

打敗我吧... css是處理你的目標的最佳方式。 – petebolduc

懸停時更改圖像

回答

相關問題