Перенос изображений в Firefox

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 :hover - это путь.

Если вы действительно хотите сделать это в JavaScript, присвойте каждому изображению идентификатор и назначьте функции для каждого из двух событий.Так как имена файлов изображений тесно связаны (вы только добавляете «Не» в конце), пара функций будет вам полезна и позволит избежать повторений.

Не используйте ярлыки.Использование:

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

AFAIK Это единственный стандартный способ надежно ссылаться на HTML-объекты и их свойства.Ключевое слово this может сделать вещи короче, но вы можете избегать его, пока не ознакомитесь с некоторыми из его преимуществ.

Answer 2

попробуйте отключить кеш, также я бы сделал это с помощью css

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