為什么我的翻轉圖像不起作用？

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

使用CSS精靈進行過渡。

Answer 2

您的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'"

演示： 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'"

演示： http : //jsfiddle.net/XBLfN/1/

Answer 3

請參閱： 帶按鈕的翻轉圖像

這似乎是重復的-上述問題中的解決方案應為您工作。

對於chrome（甚至對於其他瀏覽器），驗證HTML始終是一個好主意： http : //validator.w3.org/