Rollover Images in Firefox

Question

Hi I have a fairly basic task, but cant seem to find the right answer to,

I'm making a set of buttons, you put the mouse over them and they change to a different image, take mouse off, change back...

It works fine in Safari, IE, Chrome,

Get into firefox and 4 don't work, randomly, not in any sort of order...

main.php - news.php - estore.php - contact.php

all dont work, all the images are double checked

Can't for the life of me figure this one out due to the inconsistency of the issue

Any help would be great cheers

      <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

try turning off cache, also I'd do this with css

Answer 2

CSS :hover is the way to go.

If you really want to do it in JavaScript, give each image an ID and assign functions to each of the two events. Since the image filenames are closely related (You only add "Not" at the end), a pair of functions would serve you well and avoid repetition.

Don't use shortcuts. Use:

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

AFAIK It's the only standard way to reliably refer to HTML entities and their properties. The this keyword can make things shorter, but you might as well avoid it until you're more familiar with some of its perks.

Answer 3

A better and more efficient way to do this would to be use CSS Sprites. You can see a live demo on JSFiddle