Rollover Изображения в Firefox

Question

Привет У меня есть довольно основной задачей, но не могу показаться, чтобы найти правильный ответ,

Я делает набор кнопок, вы поместите курсор над ними, и они переходят на другой изображение, возьмите мышь прочь, изменить обратно ...

Это отлично работает в Safari, IE, Chrome,

Получить в светлячок и 4 не работают, случайным образом, а не в каких-либо целях ...

main.php - news.php - estore.p л.с. - 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, дайте каждому изображению идентификатор и назначьте функции каждому из двух событий. Поскольку имена файлов изображений тесно связаны (в конце вы добавляете «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