爲什麼不是我的翻轉圖像工作？

Question

我有一個代碼爲我的網站，當一個圖像被點擊時彈出窗口顯示哪些工作正常。但是，每當我翻轉第一次翻轉作品時，翻轉前的原始圖像不再顯示？爲什麼是這樣？

<input name="image" type="image" onMouseOver= src="http://japanesefriend.zxq.net/images/x11_title.gif" onMouseOut= src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif'" value="Place Order" src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif" onClick='styledPopupOpen("<img src=http://japanesefriend.zxq.net/flashcards/go.gif />")' align=middle width=164 height=154> 

Answer 1

見：rollover image with buttons

這似乎是一個重複的 - 該解決方案在上面的問題中dl爲你工作。

對於鉻（甚至是其他瀏覽器），它總是以驗證您的HTML是一個好主意： http://validator.w3.org/

Answer 2

使用CSS sprites進行翻轉。

Answer 3

您的HTML無效。

這...

onMouseOver= src="http://japanesefriend.zxq.net/images/x11_title.gif" 

應該是這樣的......

onMouseOver="this.src='http://japanesefriend.zxq.net/images/x11_title.gif'" 

同爲onMouseOut ...

onMouseOut="this.src='http://japanesefriend.zxq.net/images/level4_nouns_08.gif'" 

DEMO：http://jsfiddle.net/XBLfN/

---

或者你也可以消除this.，只是做src='http://...

onMouseOver="src='http://japanesefriend.zxq.net/images/x11_title.gif'" 
onMouseOut="src='http://japanesefriend.zxq.net/images/level4_nouns_08.gif'" 

DEMO：http://jsfiddle.net/XBLfN/1/