为什么我的翻转图像不起作用？

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/