Question

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

我正在制作一组按钮，你将鼠标放在它们上面，然后它们变成另一个图像，关闭鼠标，改回来......

在Safari，IE，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>

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

上看到现场演示

Firefox中的翻转图像

3 个答案: