Javascript Firefox中的滚动图像

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

我正在做一组按钮，你把鼠标放在它们上面，它们会变成一个不同的图像，取下鼠标，再换回来

它在Safari中运行良好，即Chrome

进入firefox，4不工作，随机，不按任何顺序

main.php- news.php- estore.php- contact.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> 

尝试关闭缓存，我也会使用css来实现这一点：悬停是一种方法

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

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

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

---

这是可靠引用HTML实体及其属性的唯一标准方法。关键字可以使事情变得更短，但您最好在更熟悉它的一些优点之前避免使用它。

更好、更有效的方法是使用CSS精灵

.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;   
}

---

你可以在

上看到一个现场演示，你说“4不起作用”是什么意思？四个图片作为按钮不会像在其他浏览器中那样改变鼠标上的图像，就像Firefox中的其他按钮一样，似乎有很多关于这一点的帖子，但从来没有人发布过他们的解决方案。。。如果有人遇到过类似的firefox问题，为什么不使用CSS呢？声明CSS锚伪类的顺序很重要