Firefox 中的翻转图像

Question

您好，我有一个相当基本的任务，但似乎找不到正确的答案，

我正在制作一组按钮，你把鼠标放在它们上面，它们就会变成不同的图像，把鼠标移开，再变回来......

在 Safari、IE、Chrome 中运行良好，

进入 Firefox 和 4 不工作，随机，不按任何顺序...

main.php - 新闻.php - estore.php - 联系方式.php

所有都不起作用，所有图像都经过双重检查

由于问题的不一致，我一生都无法解决这个问题

任何帮助都会非常高兴

      <a href="main.php" target="mainFrame"><img src="menuHomeNot.jpg" onmouseover='this.src="menuHome.jpg"' onmouseout='this.src="menuHomeNot.jpg"' alt="Home"/></a> 
        <img src="menuBreaker.jpg" alt=" "  /> 
      <a href="news.php" target="mainFrame"><img src="menuNewsNot.jpg" onmouseover='this.src="menuNews.jpg"' onmouseout='this.src="menuNewsNot.jpg"' alt="News" /></a> 
        <img src="menuBreaker.jpg" alt=" "  /> 
      <a href="membership.php" target="mainFrame"><img src="menuMembershipNot.jpg" onmouseover='this.src="menuMembership.jpg"' onmouseout='this.src="menuMembershipNot.jpg"' alt="Membership" /></a> 
        <img src="menuBreaker.jpg" alt=" "  /> 
      <a href="registration.php" target="mainFrame"><img src="menuRegNot.jpg" onmouseover='this.src="menuReg.jpg"' onmouseout='this.src="menuRegNot.jpg"' alt="Registration" /></a> 
        <img src="menuBreaker.jpg" alt=" "  /> 
      <a href="links.php" target="mainFrame"> <img src="menuLinksNot.jpg" onmouseover='this.src="menuLinks.jpg"' onmouseout='this.src="menuLinksNot.jpg"' alt="Links" /></a> 
        <img src="menuBreaker.jpg" alt=" "  /> 
      <a href="loginpage.php" target="mainFrame"> <img src="menuLoginNot.jpg" onmouseover='this.src="menuLogin.jpg"' onmouseout='this.src="menuLoginNot.jpg"' alt="LogIn" /></a> 
        <img src="menuBreaker.jpg" alt=" "  /> 
      <a href="committee.php" target="mainFrame"> <img src="menuCommitteeNot.jpg" onmouseover='this.src="menuCommittee.jpg"' onmouseout='this.src="menuCommitteeNot.jpg"' alt="Committee" /></a> 
        <img src="menuBreaker.jpg" alt=" "  /> 
      <a href="estore.php" target="mainFrame"> <img src="menuEStoreNot.jpg" onmouseover='this.src="menuEStore.jpg"' onmouseout='this.src="menuEStoreNot.jpg"' alt="E-Store" /></a> 
        <img src="menuBreaker.jpg" alt=" "  /> 
      <a href="guestbook.php" target="mainFrame"> <img src="menuGuestbookNot.jpg" onMouseOver="this.src='menuGuestbook.jpg'" onMouseOut="this.src='menuGuestbookNot.jpg'" alt="Guestbook" /></a> 
        <img src="menuBreaker.jpg" alt=" "  /> 
      <a href="contact.php" target="mainFrame"> <img src="menuContactNot.jpg" onmouseover='this.src="menuContact.jpg"' onmouseout='this.src="menuContactNot.jpg"' alt="Contact" /></a> 

Answer 1

尝试关闭缓存，我也会用 css 来做这个

Answer 2

CSS :hover 是要走的路。

如果您真的想在 JavaScript 中执行此操作，请为每个图像指定一个 ID，并为这两个事件中的每一个分配函数。由于图像文件名密切相关（您只在末尾添加“Not”），因此一对函数可以很好地为您服务并避免重复。

不要使用快捷方式。使用：

document.getElementById('your_id').setAttribute('src', 'image.jpg')

AFAIK 这是可靠地引用 HTML 实体及其属性的唯一标准方法。 this 关键字可以使事情变得更短，但您最好避免使用它，直到您更熟悉它的一些好处。

Answer 3

更好、更有效的方法是使用 CSS Sprites。

.footer-btn {
background-image:url("http://inyourclosetnyc.com/wp-content/themes/inyourcloset/images/footer-btn.png");
border:0;
display:block;
height:26px;
text-indent:-9999px;
width:78px;
}


.footer-btn:hover{
 background-position:0 -26px;   
}

您可以在JSFiddle 上观看现场演示